javascript - 如何使用 javascript 将文本或数字范围 append 到 div？

Question

我继承了一个像这样的JS文件:

    var id1 = document.getElementById("id1");
    var id2 = document.getElementById("id2");
    var id3 = document.getElementById("id3");
    var id4 = document.getElementById("id4"); //etc etc.

我想知道是否有一种更简单的方法使用纯 JavaScript 将数字 append 到具有相同名称的 id，而不是逐行列出每个数字。

请指教。

谢谢!

Answer 1

var nodes = [];
var find = 6;

for (var i = 1; i <= 6; i++) {
  nodes.push(document.getElementById('id' + i));
}

console.log(nodes);

<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id6"></div>

<小时/>

更强大的解决方案:

使用querySelectorAll选择id以id开头的元素，然后过滤掉与id不匹配的结果，后跟数量。

var nodes = document.querySelectorAll('[id^="id"]');
nodes = [].slice.call(nodes).filter(function(node) {
  return /id\d+/.test(node.id);
});

console.log(nodes);

<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id6"></div>
<!-- This node should not be included -->
<div id="idea"></div>