Javascript 在附加动态元素时组织DOM

我有两个

输入

和一个p

元素

我只附加一个包装器div输入元素，但当我附加元素的顺序改变时

我的意思是，正如您所看到的，第一个元素是

p

元素。但如果删除javascript代码，p元素位于第二行

我们如何解决这个问题

var input=document.querySelectorAll（'input'）；
对于（变量i=0；i

洛勒姆

听起来您基本上是在尝试将每个

包装在

中，而不改变其在DOM中的位置。正如您所发现的，

appendChild

按照tin上的说明执行操作，即将元素添加到父元素的子元素的末尾

要将一个元素放在末尾以外的地方，请使用或。后者将如下所示：

var inputs=document.querySelectorAll（'input'）；
对于（变量i=0；i

div{边框：1px纯蓝色；}

洛勒姆

您可以使用

replaceChild

将输入替换为新的div。这样可以保留顺序：

var div = document.createElement("div");
document.body.replaceChild(input[i], div);
div.appendChild(input[i]);