append prepend after and before

Question

I am pretty proficient with coding  but now and then I come across code that seems to do basically the same thing  My main question here is  why would you use  append   rather then  after   or vice verses    I have been looking and cannot seem to find a clear definition of the differences between the two and when to use them and when not to   What are the benefits of one over the other and also why would i use one rather then the other   Can someone please explain this to me   var txt           id     span first   html            id     a append   live  click   function  e        e preventDefault                id      innerDiv   append txt               id     a prepend   live  click   function  e        e preventDefault                id      innerDiv   prepend txt               id     a after   live  click   function  e        e preventDefault                id      innerDiv   after txt               id     a before   live  click   function  e        e preventDefault                id      innerDiv   before txt

User · Answer

Imagine the DOM  HTML page  as a tree right  The HTML elements are the nodes of this tree   The append   adds a new node to the child of the node you called it on    Example     mydiv   append   lt p gt Hello there lt  p gt      creates a child node  lt p gt  to  lt div gt    The after   adds a new node as a sibling or at the same level or child to the parent of the node you called it on

User · Answer

There is a basic difference between  append   and  after   and  prepend   and  before      append   adds the parameter element inside the selector element s tag at the very end whereas the  after   adds the parameter element after the element s tag    The vice-versa is for  prepend   and  before      Fiddle

User · Answer

The best way is going to documentation    append   vs  after      append     Insert content  specified by the parameter  to the end of each element in the set of matched elements   after     Insert content  specified by the parameter  after each element in the set of matched elements          prepend   vs  before     prepend    Insert content  specified by the parameter  to the beginning of each element in the set of matched elements   before    Insert content  specified by the parameter  before each element in the set of matched elements    So  append and prepend refers to child of the object whereas after and before refers to sibling of the the object

User · Answer

To try and answer your main question  why would you use  append   rather then  after   or vice verses  When you are manipulating the DOM with jquery the methods you use depend on the result you want and a frequent use is to replace content  In replacing content you want to  remove   the content and replace it with new content   If you  remove   the existing tag and then try to use  append   it won t work because the tag itself has been removed  whereas if you use  after    the new content is added  outside  the  now removed  tag and isn t affected by the previous  remove

User · Answer

There is no extra advantage for each of them  It totally depends on your scenario  Code below shows their difference       Before inserts your html here  lt div id  mainTabsDiv  gt      Prepend inserts your html here      lt div id  homeTabDiv  gt           lt span gt              Home          lt  span gt       lt  div gt       lt div id  aboutUsTabDiv  gt           lt span gt              About Us          lt  span gt       lt  div gt       lt div id  contactUsTabDiv  gt           lt span gt              Contact Us          lt  span gt       lt  div gt      Append inserts your html here  lt  div gt  After inserts your html here

User · Answer

append    amp  prepend   are for inserting content inside an element  making the content its child  while after    amp  before   insert content outside an element  making the content its sibling

User · Answer

This image displayed below gives a clear understanding and shows the exact difference between  append     prepend     after   and  before      You can see from the image that  append   and  prepend   adds the new elements as child elements  brown colored  to the  target   And  after   and  before   adds the new elements as sibling elements  black colored  to the  target   Here is a DEMO for better understanding     EDIT  the flipped versions of those functions     Using this code   var  target       target      target append   lt div class  child  gt 1  append lt  div gt      target prepend   lt div class  child  gt 2  prepend lt  div gt      target before   lt div class  sibling  gt 3  before lt  div gt      target after   lt div class  sibling  gt 4  after lt  div gt          lt div class  child flipped  gt or appendTo lt  div gt    appendTo  target       lt div class  child flipped  gt or prependTo lt  div gt    prependTo  target       lt div class  sibling flipped  gt or insertBefore lt  div gt    insertBefore  target       lt div class  sibling flipped  gt or insertAfter lt  div gt    insertAfter  target     on this target    lt div class  target  gt      This is the target div to which new elements are associated using jQuery  lt  div gt       So although these functions flip the parameter order  each creates the same element nesting   var  div       lt div gt    append     lt img gt      var  img       lt img gt    appendTo     lt div gt          but they return a different element  This matters for method chaining

User · Answer

See    append   puts data inside an element at last index and  prepend   puts the prepending elem at first index  suppose   lt div class  a  gt     lt ---you want div c to append in this    lt div class  b  gt b lt  div gt   lt  div gt   when  append   executes it will look like this      a   append     c      after execution   lt div class  a  gt     lt ---you want div c to append in this    lt div class  b  gt b lt  div gt     lt div class  c  gt c lt  div gt   lt  div gt    Fiddle with  append   in execution   when  prepend   executes it will look like this      a   prepend     c      after execution   lt div class  a  gt     lt ---you want div c to append in this    lt div class  c  gt c lt  div gt     lt div class  b  gt b lt  div gt   lt  div gt    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   lt div class  a  gt     lt div class  b  gt b lt  div gt   lt  div gt   lt div class  c  gt c lt  div gt     lt ----this will be placed here   Fiddle with  after   in execution   using before      a   before     c      after execution   lt div class  c  gt c lt  div gt     lt ----this will be placed here  lt div class  a  gt     lt div class  b  gt b lt  div gt   lt  div gt    Fiddle with  before   in execution

User · Answer

lt div gt  lt  div gt          lt --     root   before   lt div gt  lt  div gt      lt div class  root  gt        lt --     root   prepend   lt div gt  lt  div gt        lt div gt  lt  div gt        lt --     root   append   lt div gt  lt  div gt      lt  div gt      lt --     root   after   lt div gt  lt  div gt      lt div gt  lt  div gt

[javascript] .append(), prepend(), .after() and .before()

Examples related to javascript

Examples related to jquery

Examples related to append

Examples related to prepend

Examples related to jquery-after