Question

我有2 input和1 p element。

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

我的意思是，你可以看到第一个是p元素。但是如果删除javascript代码，则p元素位于第二行。

我们如何解决这个问题？

var input = document.querySelectorAll('input');
for (var i = 0; i < input.length; i++) {
  if (input[i].type == "text") {

    // Create wrapper div
    var div = document.createElement("div");
    document.body.appendChild(div);
    div.appendChild(input[i]);

  }
}

<input type="text" value="first" />
<p>Lorem</p>
<input type="text" value="third" />

Answer 1

听起来你基本上试图将每个<input>包裹在<div>中而不改变它在DOM中的位置。正如你所发现的那样，appendChild完成它在锡上所说的内容，即将元素添加到父母子女的末尾。

要将元素放在除结尾之外的某个位置，请使用insertBefore或replaceChild。后者看起来像这样：

var inputs = document.querySelectorAll('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  if (input.type === 'text') {
    var div = document.createElement('div');
    input.parentElement.replaceChild(div, input);
    div.appendChild(input);
  }
}

div { border: 1px solid blue; }

<input type="text" value="first" />
<p>Lorem</p>
<input type="text" value="third" />

或者，更简洁：

Array.prototype.forEach.call(document.querySelectorAll('input[type=text]'), input => {
  const div = document.createElement('div');
  input.parentElement.replaceChild(div, input);
  div.appendChild(input);
});

div { border: 1px solid blue; }

<input type="text" value="first" />
<p>Lorem</p>
<input type="text" value="third" />

Answer 2

您可以使用replaceChild将输入替换为新div。这样就保留了订单：

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

在追加动态元素时组织DOM

2 个答案: