javascript - append 动态元素时组织 DOM

Question

我有 2 个输入 和一个 p 元素。

我仅 append 一个包装 div 输入元素，但是当我 append 元素时，元素的顺序会发生变化。

我的意思是，正如您所看到的，第一个是 p 元素。但如果删除 JavaScript 代码，p 元素将位于第二行。

我们如何解决这个问题？

<强> JSFIDDLE

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" />