突变摘要库：如何将 html 元素附加到添加的元素答案

【问题标题】：Mutation Summary Library: How to append html elements to added elements突变摘要库：如何将 html 元素附加到添加的元素
【发布时间】：2014-06-24 09:20:39
【问题描述】：

我使用Mutation Summary library 来观察何时添加了特定类型的元素，然后将我的 html 元素附加到每个元素：

var observer = new MutationSummary({
      callback: theNextPageLoaded,
      queries: [{
           element: "li.sweet"
      }]
});

function theNextPageLoaded(summaries) {
    var sc = summaries[0],
    sc_length = sc.added.length,
    btn = $('<button>', {
          class: 'my_btn',
          text: 'Please work!'
        });

    sc.added.forEach(function(newEl) {
      newEl.appendChild(btn);
      console.log(typeof(newEl));  //newEl's type is 'object'
    });
}

上面的代码不起作用。我不确定我什至可以在对象上使用appendChild。任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery google-chrome-extension mutation-observers

【解决方案1】：

您的问题是将来自Mutation Summary response 的“裸”DOM 元素和jQuery 元素混合在一起。纯 DOM appendChild 无法理解您的 jQuery 包装的 btn。

所以，你需要让它们都是同一种类型：

$(newEl).append(btn); // jQuery
newEl.appendChild(btn.get(0)); // pure DOM

两者都有效，但第一个可能更惯用。

【讨论】：