添加動態元素時組織DOM

Question

我有2 input和一個p element。

我附加一個包裝div只輸入元素，但當我追加元素元素的順序改變。

我的意思是，你可以看到第一個元素是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

這聽起來像你基本上試圖總結在<div>每個<input>不改變其在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]);