更改 DOM 中标签的位置

【问题标题】：Change position of tags in the DOM更改 DOM 中标签的位置
【发布时间】：2011-12-20 02:08:24
【问题描述】：

<p>I like turtles</p>
<h3>Child brags about stuff</h3>
<h4>The Herd</h4>

如何更改标签的位置（顺序）？

到这里：

<h3>Child brags about stuff</h3>
<p>I like turtles</p>
<h4>The Herd</h4>

有没有 JQuery 的可能性？

【问题讨论】：

【解决方案1】：

使用.detach() 和.insertAfter() jQuery 方法，像这样：

$(function() {
   $('p').detach().insertAfter('h3'); 
});

jsFiddle 证明。

【讨论】：

【解决方案2】：

使用 jQuery：

$('h3').after($('p'));

另见我的jsfiddle。

【讨论】：

【解决方案3】：

如果变量h3elem 中有h3 和pelem 中的p（随心所欲地获取它们 - jQuery、getElementById 或 getElementsByTagName 或其他任何东西），请使用：

h3elem.parentNode.insertBefore(h3elem, pelem);

这会将h3 移动到p 之前。

【讨论】：

【解决方案4】：

下面的代码会在<p>标签之前插入<h3>标签，你可以给它们分配一个id来唯一标识它们。

$('h3').insertBefore($('p'));

【讨论】：

【解决方案5】：

function doWorks(){

    var h3 = $("h3");

    h3.remove();

    h3.insertBefore("p");


}

【讨论】：