更改 DOM 中标签的位置

Posted 2023-05-09

技术标签:

【中文标题】更改 DOM 中标签的位置【英文标题】：Change position of tags in the 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。

【讨论】：

我忘记了 .after() 移动元素，如果它已经在 DOM 中。简洁明了。【参考方案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");

【讨论】：

为什么不在第二行使用h3变量？

以上是关于更改 DOM 中标签的位置的主要内容，如果未能解决你的问题，请参考以下文章