在 JavaScript 中添加元素时如何获得通知

在动态添加元素到页面时，您可能需要在完成后收到通知以执行一些其他的操作。 在本文中，我们将介绍如何使用不同的方法获得通知。

使用回调函数

您可以使用回调函数将函数传递给添加元素的函数，以在完成时执行。 您可以使用以下示例代码：

function addElement(element, callback) {
    const parent = document.querySelector("#myParentElement");
    parent.appendChild(element);
    callback();
}

//使用回调函数在添加元素后执行的代码
function afterElementAdded() {
    console.log("New element added.");
}

const newElement = document.createElement("div");
newElement.innerText = "Hello World";

//在添加元素时将回调函数传递给addElement函数
addElement(newElement, afterElementAdded);

使用事件监听器

您可以添加事件监听器来监听某些元素的已添加事件，以在完成后执行一些操作。 在此示例中，我们将使用DOMSubtreeModified事件来监听父元素发生更改时触发的事件。 它将在添加元素时触发。

const parentElement = document.querySelector("#myParentElement");

parentElement.addEventListener("DOMSubtreeModified", () => {
    console.log("New element added.");
});

请注意，DOMSubtreeModified事件已被弃用，但在大多数浏览器中仍然有效。

使用MutationObserver

您可以使用MutationObserver API来监听更改和添加元素。 MutationObserver允许您跟踪DOM元素层次结构中所发生的任何变化。

const parentElement = document.querySelector("#myParentElement");

const observerOptions = {
    childList: true, // 监听子元素的添加或删除
    attributes: false, // 监听属性的更改
    subtree: false // 是否在当前元素内部的所有子元素上启动观察器
};

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === "childList") {
            console.log("New element added.");
        }
    });
});

observer.observe(parentElement, observerOptions);

以上就是使用 JavaScript 将元素添加到页面时如何获得通知的几种方法，您可以根据您的需求选择其中一种方法。