是否可以将元素附加到 JavaScript nodeList？

Question

I’m generating content dynamically, so I’m often ending up with documentFragments which I’m querying using querySelectorAll or querySelector returning a nodeList 我的 documentFragment 中的元素。

有时我想在列表中添加一个项目，但我在网上找不到任何关于这是否可能的信息。

我这样试过：

  document.querySelectorAll(".translate").item(length+1) = document.createElement("div");

和这个：

  document.querySelectorAll(".translate").shift(document.createElement("div"));

但两者都不起作用（如预期的那样）

问题：

是否可以手动将元素添加到 NodeList？我想，虽然不是，但还是要问。

感谢您提供一些见解？

编辑：

更多信息：我正在生成一个动态内容块，我想将其附加到我的页面。默认情况下，该块是英文的。由于用户正在查看中文页面，我在动态片段上运行翻译器，然后再将其附加到 DOM。在我的页面上，我还有一个元素，比如说一个标题，它应该根据添加的动态内容而改变。我的想法是一步完成 = 尝试向我的 nodeList 添加一个元素。但是从现在开始写……我想不可能:-)

原文由 frequent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：正如@Sniffer 所提到的，NodeLists 是只读的（长度属性和项目）。您可以操纵它们的其他所有内容，如下所示，但如果您想操纵它们，最好将它们转换为数组。

 var list = document.querySelectorAll('div');
var spans = document.querySelectorAll('span');

push(list, spans);
forEach(list, console.log); // all divs and spans on the page

function push(list, items) {
  Array.prototype.push.apply(list, items);
  list.length_ = list.length;
  list.length_ += items.length;
}

function forEach(list, callback) {
  for (var i=0; i<list.length_; i++) {
    callback(list[i]);
  }
}

将 NodeList 转换为数组（ list = Array.prototype.slice(list) ）可能是一个更好的主意。

 var list = Array.prototype.slice.call(document.querySelectorAll('div'));
var spans = Array.prototype.slice.call(document.querySelectorAll('span'));

list.push.apply(list, spans);
console.log(list); // array with all divs and spans on page

原文由 Tibos 发布，翻译遵循 CC BY-SA 3.0 许可协议