JavaScript-元素开始存在时追加子元素

我正在为Chrome扩展从页面中选择多个元素，其中一些元素没有被检测到

var innerChat = document.querySelector('.chat-list');

我想将child附加到此元素，但脚本在它开始存在之前就开始编辑它

innerChat.appendChild(emoteMenuWrap);

这显然导致：

Uncaught TypeError: Cannot read property 'appendChild' of null

最好的方法是什么？

使用

假设您的

innerChat

有一个父元素

chatDiv

chatDiv

必须存在于页面上，但

innerChat

不需要：

const observer = new MutationObserver(callbackFunction)
const config = { subtree: true };
observer.observe(chatDiv, config);

当

chatDiv

的内容更改时（例如，当您向其添加

innerChat

时，

observer

将运行回调函数

在回调函数中，你可以做任何你想等着做的事情

这里成功的一个关键是选择父容器，这样它内部就不会发生多次触发事件的其他更改

最后，您可能希望删除回调中的观察者：

observer.disconnect();

---

注意：我编辑这篇文章是为了建议观察

子树，因为你实际上是在添加元素，而不是改变现有的元素。
突变观察者是一个很好的选择。对于以下不支持此功能的环境，由于GetElementsByCassName返回一个实时列表，因此也可以使用此功能：

var innerChat = document.getElementsByClassName("chat-list");

在其他脚本中：

function process(){
   if(!innerChat.length){
       requestAnimationFrame(process);
   } else {
       innerChat[0].appendChild(emoteMenuWrap);
   }
}
requestAnimationFrame(process);