Javascript Append Child AFTER Element

Question

I would like to append an li element after another li inside a ul element using javascript  This is the code I have so far    var parentGuest   document getElementById  one    var childGuest   document createElement  li    childGuest id    two     I am familiar with appendChild   parentGuest appendChild childGuest     However this appends the new element inside the other  and not after  How can I append the new element after the existing one  Thanks    lt ul gt     lt li id  one  gt  lt  -- where the new li is being put -- gt  lt  li gt     lt  -- where I want the new li -- gt   lt  ul gt

User · Answer

If you are looking for a plain JS solution, then you just use insertBefore() against nextSibling.

Something like:

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Note that default value of nextSibling is null, so, you don't need to do anything special for that.

Update: You don't even need the if checking presence of parentGuest.nextSibling like the currently accepted answer does, because if there's no next sibling, it will return null, and passing null to the 2nd argument of insertBefore() means: append at the end.

Reference:

.

IF you are using jQuery (ignore otherwise, I have stated plain JS answer above), you can leverage the convenient after() method:

$("#one").after("<li id='two'>");

Reference:

jQuery after()

User · Answer

You could also do  function insertAfter node1  node2        node1 outerHTML    node2 outerHTML      or  function insertAfter2 node1  node2        var wrap   document createElement  div        wrap appendChild node2 cloneNode true        var node2Html   wrap innerHTML      node1 insertAdjacentHTML  afterend   node2Html

User · Answer

This suffices     parentGuest parentNode insertBefore childGuest  parentGuest nextSibling    null     since if the refnode  second parameter  is null  a regular appendChild is performed  see here   http   reference sitepoint com javascript Node insertBefore  Actually I doubt that the    null is required  try it and see

User · Answer

You can use   if  parentGuest nextSibling      parentGuest parentNode insertBefore childGuest  parentGuest nextSibling     else     parentGuest parentNode appendChild childGuest         But as Pavel pointed out  the referenceElement can be null undefined  and if so  insertBefore behaves just like appendChild  So the following is equivalent to the above   parentGuest parentNode insertBefore childGuest  parentGuest nextSibling

User · Answer

after is now a JavaScript method MDN Documentation Quoting MDN  The ChildNode after   method inserts a set of Node or DOMString objects in the children list of this ChildNode s parent  just after this ChildNode  DOMString objects are inserted as equivalent Text nodes   The browser support is Chrome 54    Firefox 49   and Opera 39    It doesn t support IE and Edge  Snippet  x000D   x000D  var elm document getElementById  div1    var elm1   document createElement  p    var elm2   elm1 cloneNode    elm append elm1 elm2      added 2 paragraphs elm1 after  This is sample text      added a text content elm1 after document createElement  span       added an element console log elm innerHTML   x000D   lt div id  div1  gt  lt  div gt  x000D   x000D   x000D   In the snippet  I used another term append too

User · Answer

You need to append the new element to existing element s parent before element s next sibling  Like   var parentGuest   document getElementById  one    var childGuest   document createElement  li    childGuest id    two   parentGuest parentNode insertBefore childGuest  parentGuest nextSibling     Or if you want just append it  then   var parentGuest   document getElementById  one     var childGuest   document createElement  li     childGuest id    two    parentGuest parentNode appendChild childGuest

[javascript] Javascript Append Child AFTER Element

Examples related to javascript

Examples related to getelementbyid

Examples related to appendchild

Examples related to createelement