我如何讓JavaScript重新排列我的div標籤？

Question

可以說我有4個div（id =「div1」「div2」等）

我該如何使用Javascript使其重新排列爲2,3,1,4？

請不要建議使用其他任何東西...因爲我想要做的事情涉及Javascript，我只是一個初學者！

解釋時請詳細說明！謝謝= 3

Answer 1

您可以通過調用父元素上的insertBefore()函數在其他元素之前插入元素。

例如，如果你想插入DIV1之前DIV2

，你可以這樣做：

parent.insertBefore(div2, div1); 

下面的代碼DIV4之前插入DIV1：

var div1 = document.getElementById('div1'); 
var div4 = document.getElementById('div4'); 

var parent = div1.parentNode; 

parent.insertBefore(div1, div4); 

執行的div的訂單後是2，3，1，4.

Answer 2

• 我抓住帶有id容器的DIV，使用getElementById
• 獲得該DIV的孩子.children()
• 使用outerHTML，建設一個新的字符串交換第一和第三要素
• 的innerHTML設置爲我剛建

HTML

的字符串

<div id="containter"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 

JavaScript

var el = document.getElementById('containter'), 
    divs = el.children, 
    len = divs.length; 

// swap 3 and 1 
var html = divs[1].outerHTML; 
html += divs[2].outerHTML; 
html += divs[0].outerHTML; 
html += divs[4].outerHTML; 

el.innerHTML = html; 

Answer 3

DEMO

這應該是很容易理解的：

HTML：

<div id="container"> 
    <div id="div1">1</div> 
    <div id="div2">2</div> 
    <div id="div3">3</div> 
    <div id="div4">4</div> 
</div> 

的Javascript：

var container = document.getElementById('container'), 
    divs = container.getElementsByTagName('div'), 
    tmpdiv = document.createElement('div'), 
    order = [2, 1, 3, 4]; 

for (var i = 0; i < order.length; i++) { 
    tmpdiv.appendChild( document.getElementById('div' + order[i]) ); 
} 

container.parentNode.replaceChild(tmpdiv, container);