javascript - JS- appendChild 从一个 div 对象到另一个

Question

我不太清楚为什么这段代码没有达到我的预期。我有两个 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 不起作用；即，为什么没有背景颜色变为红色。

Answer 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";
    }
}