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

Question

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

<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标签的值是奇数，意思是这样的:

1

3

5

7

9

11

13

15

17

19

21

23

25

27

29

31

33

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

Answer 1

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

1, 2, 3, 4

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

2, 3, 4

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

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