JQuery: Append before an element

Question

Using JQuery I have appended a div into a container called .mobile-sub. I call the append by doing:

$('.s2_error').addClass("revive");
$('.revive').parent(".mobile-sub").append('<div>mydiv</div>');

It works fine but the problem is that it is placing the div after the .s2_error tag whereas I need it to be placed before so the end result HTML will look like this:

<div>mydiv</div>
<p class="s2_error">Error</p>

Any ideas?

Answer 1

Using various options like below

insertBefore

$("<div>mydiv</div>").insertBefore('.mobile-sub .s2_error');

OR by writing another selector inside your insertBefore

$("<div>mydiv</div>").insertBefore($('.revive').parent(".mobile-sub").find('.s2_error'));

Meaning

$('thisElementShouldBe').insertBefore('thisElement');

---

prepend

$('.revive').parent(".mobile-sub").prepend('<div>mydiv</div>');

So <div>mydiv</div> will always be added as the first child of mobile-sub

---

before

 $('.revive').parent(".mobile-sub").find('.s2_error').before("<div>mydiv</div>");