append() & prepend() VS after() & before()

append(): Inserts the specified content as the last child of the target element.
prepend(): Inserts the specified content as the first child of the target element.
after(): Inserts the specified content immediately after the target element.
before(): Inserts the specified content immediately before the target element.

 

// Add an element using append()
$(targetElementSelector).append('<div class="new-element">This is a new appended element.</div>');

// Add an element using prepend()
$(targetElementSelector).prepend('<div class="new-element">This is a new prepended element.</div>');

// Add an element using after()
$(targetElementSelector).after('<div class="new-element">This is a new element inserted after the target.</div>');

// Add an element using before()
$(targetElementSelector).before('<div class="new-element">This is a new element inserted before the target.</div>');