JS- appendChild 从一个 div 对象到另一个答案

【问题标题】：JS- appendChild from one div object to anotherJS- appendChild 从一个 div 对象到另一个
【发布时间】：2014-12-15 18:22:12
【问题描述】：

我不太清楚为什么这段代码没有达到我的预期。我有两个 div 对象，每个对象中有一系列输入标签，如下所示：

<div id="div1">
    <input type....></input>
    etc,etc,etc
</div>

我想从一个输入标签中获取一个输入标签，并附加到另一个标签上，然后更改该 div 中所有输入的样式。这就是我的意思：

var div1 = document.getElementById("div1").childNodes;
var div2 = document.getElementById("div2").childNodes;
div1.appendChild(div2[1]);
var i;
for (i = 0; i < div1.length; i++) {
    div1[i].style.backgroundColor = "red";
}

我知道在使用 childNodes 时会在标签之间读取空格，但是，我确保 div2[1] 不是空格。我也明白还有其他方法可以做我想做的事情，事实上我找到了其他成功的方法，但我想知道为什么上面的代码，使用 childNodes，不起作用；即为什么没有背景颜色变为红色。

【问题讨论】：

如果你写 console.log(div2[1]) 在控制台会发生什么？这可能会帮助你朝着正确的方向前进
你有一些语法错误，你应该咨询 Mozilla 开发者网络 (MDN)。同时打开 Chrome / Safari 或 Firefox 中的开发者工具查看详细错误
错误是使用 div1 ，一个 nodeList 作为元素。同样设置元素的style.backgroundColor，而不检查它是否真的是一个元素，将导致错误并停止javascript。看看我的回答，希望对你有帮助
@Andrea：确实，我赞成你发现这一点的答案，但是——假设评论是针对我的——那是“错误”，而不是一个（“一些”）语法错误。
@DavidThomas，我会纠正自己，有一个语法错误和一些不好的做法。一种不好的做法是使用 childNodes 而不是从 Element Object 继承并检索 HTML 子节点和文本节点的子节点。

标签： javascript child-nodes

【解决方案1】：

所以问题就在这里

div1 不是元素，是节点列表。并且设置节点的样式而不检查它是否是一个元素会给你错误。

要让它发挥作用，你应该这样做：

var div1 = document.getElementById("div1");
var div1nodes = document.getElementById("div1").childNodes;
var div2nodes = document.getElementById("div2").childNodes;
div1.appendChild(div2nodes[1]);
var i, el;
for (i = 0; i < div1nodes.length; i++) {
    el = div1nodes[i];
    if (el.nodeType === 1) {
      el.style.backgroundColor = "red";
    }
}

【讨论】：

【解决方案2】：

childNodes 还包括文本和注释节点，因此必须确保 div2[1] 处的节点是他们想要的子节点。请注意，childNodes 获取所有节点，children 仅包含子元素。

【讨论】：