Изменить положение тегов в 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 proof.

Answer 2

С jQuery:

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

Также смотрите мой jsfiddle .

Answer 3

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

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

Answer 4

function doWorks(){

    var h3 = $("h3");

    h3.remove();

    h3.insertBefore("p");


}

Answer 5

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

h3elem.parentNode.insertBefore(h3elem, pelem);

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