Javascript Append Child AFTER Element

Question

I would like to add the li element after another li inside the ul element using javascript. This is the code that I still have.

var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; 

I am familiar with appendChild,

 parentGuest.appendChild(childGuest); 

However, this adds a new element inside another, not after. How to add a new item after an existing one? Thank.

 <ul> <li id="one"><!-- where the new li is being put --></li> <!-- where I want the new li --> </ul> 

Answer 1

You can use:

 if (parentGuest.nextSibling) { parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling); } else { parentGuest.parentNode.appendChild(childGuest); } 

---

But, as Paul noted, the reference element can be null / undefined, and if so, insertBefore behaves exactly the same as appendChild . So the following is equivalent to the above:

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

Answer 2

You need to add a new element to the existing element parent before the next sibling element. How:

 var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling); 

Or, if you just want to add it, then:

 var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; parentGuest.parentNode.appendChild(childGuest); 

Answer 3

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

Something like:

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

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

Update: You don’t even need to check if parentGuest.nextSibling presence is present in the current accepted answer, because if there is no next brother, it will return null and passing null to the second argument of insertBefore() means: add to the end.

Link:

• nextSibling
• insertBefore

.

IF you use jQuery (ignore otherwise, I said the simple JS answer above), you can use the convenient after() method:

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

Link:

• jQuery after ()

Answer 4

It's enough:

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

since if the refnode (second parameter) is zero, a regular appendChild is executed. see here: http://reference.sitepoint.com/javascript/Node/insertBefore

In fact, I doubt that || null is required || null , try it and see.

Answer 5

You can 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); } 

Answer 6

There is an interesting post on this by Dustin Diaz :

“As far as I know, Jeremy Kate seems to have come up with this idea, although you might have thought that it would also be the main DOM method. But just like getElementsByClass, it’s not. Instead of pulling a function directly from the book, I’ll leave it's for you to buy it yourself. Instead, I pulled this simple method out of the public domain ":

 function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); } 

Answer 7

after now javascript method

MDN Documentation

MDN Quote

The ChildNode.after() method inserts a set of Node or DOMString into the list of children of this parent ChildNode immediately after this ChildNode . DOMString objects are inserted as equivalent text nodes.

Browser support - Chrome (54+), Firefox (49+) and Opera (39+). It does not support IE and Edge.

Excerpt

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

 <div id="div1"></div> 

In the snippet, I used another term append