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的上述代码不起作用;即为什么backgroundColors都没有变为红色。

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

Answer 2

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

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

2 个答案: