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.

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

Ironwork

Show some html.. is the parent a ul or li? – Biondo

I voted to reopen this QA because I want to add new updated answer as this QA still pops up as top search result on google. – Aport

Answer 1

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

Had

if-else is unnecessary: the second arg of insertBefore can be null or undefined – Sharpe

Answer 2

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:

• nextSibling
• insertBefore

.

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

Burdine

excuse my ignorance but how does this implement with javascript? could you show how it will work with my current code, thanks. – Ironwork

I think if you are not using jQuery for it, then Yoshi's answer is right. It is also mentioned here netlobo.com/javascript-insertafter.html - I just tended to assume jQuery is super default. My mistake :D – Burdine

A year and half later and I get a vote up for this answer. So, I have updated it to include the shortest possible version of the plain JS solution, and a link to Mozilla docs on it. Sorry for not doing it earlier (since others did it already with very similar implementations, I didn't think I needed to). – Burdine

Answer 3

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

Rotow

Answer 4

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

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 too

Alphanumeric

Answer 5

Use the parent element children array.
In the example below we are adding a new element after the first child element (hence we will insert the new element before the element in index 1):

parentElement.insertBefore(newElement, parentElement.children[1]);

Michi

Answer 6

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.

Downwash

Answer 7

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

Entranceway