.Append(), Prepend(), .After() and .Before()

.append(), prepend(), .after() and .before()

See:

---

.append() puts data inside an element at last index and

.prepend() puts the prepending elem at first index

---

suppose:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

when .append() executes it will look like this:

$('.a').append($('.c'));

after execution:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

---

Fiddle with .append() in execution.

---

when .prepend() executes it will look like this:

$('.a').prepend($('.c'));

after execution:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

---

Fiddle with .prepend() in execution.

---

.after() puts the element after the element

.before() puts the element before the element

---

using after:

$('.a').after($('.c'));

after execution:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

---

Fiddle with .after() in execution.

---

using before:

$('.a').before($('.c'));

after execution:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

---

Fiddle with .before() in execution.

---

jQuery: Append child element before child element

Before I answer your question let me make something more clearer and easier to u so that you understand what your trying to

Append means you can insert elements as child elements at the end of the selector

example append() and appendTo()

Prepend means you can insert elements as child elements at the beginning of the selector

example prepend() and prependTo()

Notice that selector will be considered as a parent

Before means you can add elements just before the selector

example before() and insertBefore()

After means you can add elements just after the selector

example after() and insertAfter()

before and after does not treat selector as a parent element

Now to answer your question

You can do it using prepend or before

<div id="content">
    <div class="foobar"></div>
</div>

$("your element").insertBefore("#content div.foobar") // or
$("#content div.foobar").before("element") // or
$("#content").prepend("element") // or
$("element").prependTo("#content")

Notice the selector positions in prepend() and prependTo()

jQuery: append() and prepend() works but not appendTo() and prependTo()

$('#1').append('Tutorial')

is not the same as

$('Tutorial').appendTo($('#1'))

The former appends a string to '#1'. But the later uses 'Tutorial' to construct a dom element and that doesn't work. Try:

$('<span>Tutorial</span>').appendTo($('#1'))

JQuery: Append before an element

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>");

---

Related Topics