javascript - 无法在 Javascript 中控制 appendChild()

Question

使用 Javascript 拆分页面时遇到问题。我想将 17 个 p 标签移动到一个 div 标签中。所以我有 34 个这样的标签：

<p>1</p> <!-- Each p tag have the value is the number of the p tag -->

然后我有这个 Javascript 代码：

  var p = document.getElementsByTagName("p");
  var div = document.createElement("div");
  for(i=0;i<17;i++){
    div.appendChild(p[i]);
  }
  document.getElementsByTagName("body")[0].appendChild(div);

我收到的结果是在 div 标签中，有 17 个 p 标签，但是这些 p 标签的值是奇数，意思是这样的：

这是演示：http: //jsbin.com/eyivic

同时，我希望 div 标签中的 p 标签看起来像这样：

那么问题是什么？我该如何解决？非常感谢！

score 3 · Accepted Answer

当您appendChild在 div 上创建时，它会删除p数组的元素。这将使这种“唯一几率”的行为发生。假设您有 4 个 p 元素。

1, 2, 3, 4

如果您从中创建一个appendChild，p[0]它将按照您的预期移动您的 p 元素，但现在您的列表是这样的：

2, 3, 4

您现在指向p[1]，您期望那是元素 2，但它将是元素 3。

要修复它，您始终可以指向p[0]它，它会按照您的预期运行。

score 2 · Accepted Answer

您的循环应如下所示：

for(i=0;i<p.length;i++){
    var newNode = p[i].cloneNode(true);
    div.appendChild(newNode);
  }

当您执行 appendChild 时，它会从您的数组中删除。克隆将解决您的问题。

@memosdp 指出您实际上想从原始父节点中删除那些 p 元素。在这种情况下，当您的循环完成时，只需清除旧的父节点：

// your loop is before this
var node = p[0].parentNode;
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}

javascript - 无法在 Javascript 中控制 appendChild()

2 回答 2

Related

Reference