Javascript 添加元素_Javascript_Mutation Observers

Javascript 添加元素

javascript

Javascript 添加元素,javascript,mutation-observers,Javascript,Mutation Observers,我正在尝试使用mutationsobserver只记录添加的节点。这是我到目前为止得到的。我不能通过这部分考试。我卡住了。我尝试在节点列表首次启动时获取节点列表索引计数，并仅使用该计数记录新添加的节点，但最终失败。我不知道如何做到这一点。老实说，直到今天早上我才知道这件事这是我目前的剧本 const targetNode = document.getElementById('team_log_actual'); // Options for the observer (which mutat

我正在尝试使用mutationsobserver只记录添加的节点。这是我到目前为止得到的。我不能通过这部分考试。我卡住了。我尝试在节点列表首次启动时获取节点列表索引计数，并仅使用该计数记录新添加的节点，但最终失败。我不知道如何做到这一点。老实说，直到今天早上我才知道这件事

这是我目前的剧本

const targetNode = document.getElementById('team_log_actual');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
        console.log('a node added.' + mutation.target);
        var html = mutation.target;
        var htmlstring = JSON.stringify(html);
        console.log(html)


    }
}
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

每次添加一个新的。我只想对添加的节点进行字符串化。

您可以使用mutation.addedNodes查看哪些节点被添加到元素中。如果只想打印所有节点的innerHTML，可以执行以下操作：

console.log( Array.from( mutation.addedNodes ).map( node => node.innerHTML ).join('\r\n') );

这将首先将NodeList类型的addedNodes转换为数组，然后map将检索每个节点的innerHTML。然后，您可以将其连接在一起并打印出更改

下面的代码将模拟这种行为

对于配置，您不必检查属性或子树，childList将执行您希望它执行的操作