Изменить положение тегов в DOM

Question

<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?

Answer 1

Использование .detach() и .insertAfter() методы JQuery, как так:

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

jsFiddle доказательство.

Answer 2

Если у вас есть h3 в переменной h3elem и p в pelem (получить их там же вы хотите - JQuery, getElementById или getElementsByTagName, или что-нибудь на самом деле), использование:

h3elem.parentNode.insertBefore(h3elem, pelem); 

Это перемещает h3 до p.

Answer 3

function doWorks(){ 

    var h3 = $("h3"); 

    h3.remove(); 

    h3.insertBefore("p"); 


} 

Answer 4

С JQuery:

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

Также см мой jsfiddle.

Answer 5

В приведенном ниже коде будет вставляться тег <h3> до тега <p>, вы можете присвоить им идентификатор, чтобы идентифицировать их однозначно.

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