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

<强> 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);

Answer 3

我正在使用getElementById
使用.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;

我如何让javascript重新排序我的div标签？

3 个答案: