Comment ajouter un nœud enfant à une position spécifique

Question

Comment puis-je ajouter un childNode à une position spécifique en javascript?

Je veux ajouter un childNode à la 3ème position dans une div. Il y a d'autres nœuds derrière qui doivent reculer (3 devient 4, etc.)

Answer 1

Vous pouvez utiliser .insertBefore() :

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

Answer 2

Pour cela, vous avez 3 options .insertBefore (), .insertAdjacentElement () ou .insertAdjacentHtml ()

---

.insertBefore()

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

dans votre cas, vous pourriez faire comme sur réponse de Felix Kling

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

---

.insertAdjacentElement()

referenceElement.insertAdjacentElement (where, newElement);

dans votre cas, ce serait

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

---

.insertAdjacentHTML()

referenceElement.insertAdjacentElement (where, newElementHTML);

dans votre cas, ce serait

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

Answer 3

Pour insérer un nœud enfant à un index spécifique

Simplifié,

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

Ensuite,

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

Tada!

Soyez conscient de l'extension des natifs pourrait être gênant