javascript - 通过 javascript 将 HTML 元素附加到 DOM 后获取

Question

我有一个相当简单的问题，我无法解决。我想在将 HTML 元素<input></input>附加到 DOM 后获取它，因为我想向<li></li>其父元素添加一些 css 类。我设法让它适用于原生<li></li>位于我的 HTML 文件中的元素，但对于我通过将其附加到 DOM 添加的元素，我无法完成它。

一般的 HTML 结构是这样的：

<section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <li class="completed">
            <div class="view">
                <input class="toggle" type="checkbox" checked>
                <label>Taste JavaScript</label>
                <button class="destroy"></button>
            </div>
        </li>
        <li>
            <div class="view">
                <input class="toggle" type="checkbox">
                <label>Buy a unicorn</label>
                <button class="destroy"></button>
            </div>
        </li>
    </ul>
</section>

我通过此代码附加了与上述元素具有相同<li></li>HTML 结构的元素：<li></li>

document.addEventListener("DOMContentLoaded", () => {
    const todoInput = document.querySelector(".new-todo");
    const todoList = document.querySelector(".todo-list");
    todoInput.addEventListener("keypress", (event) => {
        if (event.keyCode === KEY_ENTER && todoInput.value !== "") {
            const liElementTodo = createTodoItem();
            todoList.appendChild(liElementTodo);
            clearInputContent(todoInput);
        }
    });
});

然后，如果我选中该附加项目上的复选框，我想向其父<li></li>元素添加一些 css 类，这些类适用于在“DOMContentLoaded”被触发后 DOM 中存在的 2 个项目。以下代码也放置在“DOMContentLoaded”事件的 Eventlistener 中：

inputCheckboxElements = document.querySelectorAll(".toggle");
for (const inputCheckboxElement of inputCheckboxElements) {
    inputCheckboxElement.addEventListener("change", (event) => {
        const parentDivElement = inputCheckboxElement.parentElement;
        const parentLiElement = parentDivElement.parentElement;
        console.log(inputCheckboxElement);
        if (inputCheckboxElement.checked) {
            checkBoxToggled(parentLiElement);
        } else {
            checkBoxToggled(parentLiElement);
        }
    });
}

我以为我能够以某种方式获得所有元素，也包括那些我通过 javascript 附加的 MutationObserver 但这对我来说不起作用。如果有人可以帮助我，那就太酷了。

编辑： MutationObserver 对象看起来像这样：

    MutationObserver = window.MutationObserver;
    var observer = new MutationObserver((mutations, observer) => {
        console.log(mutations, observer);
        inputCheckboxElements = document.querySelectorAll(".toggle");
        console.log(inputCheckboxElements);
    });

    observer.observe(document.body, {
        subtree: true,
        attributes: true,
        childList: true
    });

标签： javascripthtmlcssdom