How to append a childnode to a specific position

Question

How can I append a childNode to a specific position in javascript?

I want to add a childNode to the 3rd position in a div. There are other nodes behind it that need to move backwards (3 becomes 4 etc.)

Answer 1

You can use .insertBefore():

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

Answer 2

For this you have 3 options .insertBefore(), .insertAdjacentElement() or .insertAdjacentHtml()

---

.insertBefore()

var insertedElement = parentElement.insertBefore(newElement, referenceElement); 

in your case you could do as on Felix Kling answer

var insertedElement = parentElement.insertBefore(newElement, parentElement.children[2]); 

---

.insertAdjacentElement()

referenceElement.insertAdjacentElement (where, newElement); 

in your case it would be

parentElement.children[1].insertAdjacentElement("afterEnd", newElement); 

---

.insertAdjacentHTML()

referenceElement.insertAdjacentElement (where, newElementHTML); 

in your case it would be

parentElement.children[1].insertAdjacentElement("afterEnd", "<td>newElementHTML</td>");