動的要素を追加するときにDOMを整理する

Question

私は2つのinputと1つのp elementを持っています。

入力要素だけをラッパーdivに追加しますが、要素要素の順序を変更するときは追加します。

私はあなたが最初に見ることができるように、p要素を意味します。しかし、javascriptコードを削除すると、p要素は2行目にあります。

これをどのように修正できますか？

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

あなたは基本的にDOMでその位置を変えず<div>の各<input>をラップしようとしているように聞こえます。あなたが発見したように、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

あなたは新しいdiv要素を持つ入力を置き換えるためにreplaceChildを使用することができ、後者は次のようになります。 。こうして注文は保存されます：

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