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

[insertBefore](https://developer.mozilla.org/en/DOM/Node.insertBefore) — Šime Vidas, May 04 '11 at 11:44

score 177 · Accepted Answer · edited May 12 '23 at 11:47

177

You can use .insertBefore():

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

edited May 12 '23 at 11:47

Obed Parlapiano

3,226
3
21
39

answered May 04 '11 at 11:44

Felix Kling

795,719
175
1,089
1,143

14

Can you explain why you've chosen to go `parentElement.children` rather than `parentElement.childNodes`? The former lists only children which are `Element`s, thus ignoring nodes which are `Text`s, for example... Wouldn't it be better to assume that the child nodes may include all types of nodes??? – mike rodent Oct 12 '17 at 11:26
1

@mikerodent For example, when you work with list items `
` in an ordered list `

Yeti

Feb 05 '19 at 12:21

1

Using childNodes over children is the right way to go here. – brainkim Oct 30 '19 at 18:37

score 56 · Answer 2 · edited May 23 '17 at 11:54

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

score 19 · Answer 3 · edited May 23 '17 at 10:31

19

To insert a child node at a specific index

Simplified,

Element.prototype.insertChildAtIndex = function(child, index) {
  if (!index) index = 0
  if (index >= this.children.length) {
    this.appendChild(child)
  } else {
    this.insertBefore(child, this.children[index])
  }
}

Then,

var child = document.createElement('div')
var parent = document.body
parent.insertChildAtIndex(child, 2)

Tada!

Be aware of when extending natives could be troublesome

edited May 23 '17 at 10:31

Community

1
1

answered Aug 27 '16 at 12:32

Leonard Pauli

2,662
1
23
23

1

Why give a warning instead of just writing a generic function that can be called with the parent node? – jonschlinkert Jun 15 '19 at 18:36
Was probably writing mostly vanilla js with little to no dependencies at the time, which makes extensions nice. With the bundlers and module systems we have today, a utility package exposing such a function would probably be preferable. – Leonard Pauli Jun 17 '19 at 22:10
[“(If second argument) null, it will be inserted at the end.”](https://www.w3schools.com/jsref/met_node_insertbefore.asp), thus, a `this.insertBefore(child, this.children[index]) || null` could simplify this? – Frank N Aug 26 '22 at 15:21

How to append a childnode to a specific position

3 Answers3

To insert a child node at a specific index

Linked