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标签如下所示：

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

Answer 1

在div上创建appendChild时，会删除p数组的元素。这将使这种“唯一可能性”的行为发生。假设你有4个p元素。

1, 2, 3, 4

如果您从appendChild发出p[0]，它会按预期移动您的p元素，但现在您的列表是这样的：

2, 3, 4

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

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

Answer 2

你的循环应如下所示：

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中控制appendChild（）

2 个答案: