Javascript 是否可以在多个元素之间循环，然后向每个选定元素添加另一个元素？

例如，我可以使用循环将

放入两个单独的

元素中吗
我知道您可以使用函数来附加元素，但我想知道您是否可以使用循环来实现这一点。

我已经试过了，但它只选择了第一个div

HTML

JAVASCRIPT

函数myElement（标记、消息）{
var h1=document.createElement（标记）；
var text=document.createTextNode（msg）；
h1.追加子项（文本）；
返回h1；
}
var eventHolder=document.createElement（“div”）；
var事件=document.getElementsByTagName（“div”）；
对于（变量i=0；i

document.getElementsByTagName（“div”）将是文档中每个

div

的实时集合。插入另一个

div

时，其长度将增加。产生的错误是

未捕获的HierarchyRequestError:未能在“节点”上执行“appendChild”：新的子元素包含父元素

现场收藏很奇怪。改为循环并附加到静态集合的元素：

函数myElement（标记、消息）{
var h1=document.createElement（标记）；
var text=document.createTextNode（msg）；
h1.追加子项（文本）；
返回h1；
}
var eventHolder=document.createElement（“div”）；
var事件=document.querySelectorAll（“div”）；
对于（变量i=0；i

---

循环可用于将元素附加到多个标记

如果检查控制台，您应该会得到

uncaughtdomexception:无法在“节点”上执行“appendChild”：新的子元素包含父元素。

var eventHolder=document.createElement（“div”）这是一个div，尚未附加到DOM

var event=document.getElementsByTagName（“div”）这是当前连接到DOM的所有div的数组-在我们的示例2中

eventHolder.appendChild（myElement（“h1”、“事件”）
在这里，您将新创建的h1元素附加到先前创建的div
eventHolder

document.getElementsByTagName（“div”）[i].appendChild（eventHolder）此行重新检索DOM中的所有div，并根据索引追加新创建的元素

问题

在第一个循环中，DOM中有2个div，索引为0，因此它会向第一个div追加一个新元素
请注意，您正在追加一个div
eventHolder
，因此在第二个循环中，它再次获取所有div（现在是3），其中包括新div，并尝试再次追加
eventHolder
解决方案是停止在每个循环中提取DOM中的div，因此，如果DOM中有（2）个div，则只有这些div将在循环中处理，这意味着使用
事件
变量

@Snow的答案是正确的，这只是一个解释

<div id="event1" class="yellow"></div>
<div id="event2" class="blue"></div>

function myElement(tag, msg) {
  var h1 = document.createElement(tag);
  var text = document.createTextNode(msg);
  h1.appendChild(text);
  return h1;
}

var eventHolder = document.createElement("div");
var event = document.getElementsByTagName("div");

for (var i = 0; i < event.length; i++) {
    eventHolder.appendChild(myElement("h1", "events"));
    document.getElementsByTagName("div")[i].appendChild(eventHolder);
}