新創建元素的 MutationObserver？

Question

如何對新創建的元素進行 MutationObserver？ 當我創建一個新元素時，mutatonObserver 不起作用。 如果大盒子改變了樣式，我需要注冊...

<button onclick="myFunction()">Create</button>
<button onclick="myFunctionStyle()">Change style</button>

var observerm = new MutationObserver(function(mutationsm) {
    mutationsm.forEach(function(mutationRecord) {
        alert('style changed!');
    });    
});

var targetm = document.getElementById("Box");
observerm.observe(targetm, { attributes : true, attributeFilter : ['style'] });


function myFunction() {
  var newdiv = document.createElement("DIV");
  newdiv.innerHTML = "Box";
  newdiv.id = "Box";
  newdiv.style.width = "100px";
  newdiv.style.height = "50px";
  newdiv.style.backgroundColor = "red";
  
  document.body.appendChild(newdiv);
}

function myFunctionStyle() {
  document.getElementById("Box").style.backgroundColor = "blue";
}

Answer 1

由於新添加的元素已附加到document.body ，因此您需要將另一個 MutationObserver 附加到該元素。

new MutationObserver(() => {
  console.log('mutation on document body');
  // rest of the code you need when an element is appended
})
  .observe(document.body, { childList: true })