Comment faire pour ajouter un childnode à une position spécifique

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

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

InformationsquelleAutor Jarco | 2011-05-04
  1. 80

    Vous pouvez utiliser .insertBefore():

    parentElement.insertBefore(newElement, parentElement.children[2]);
    • Pouvez-vous expliquer pourquoi vous avez choisi d'aller parentElement.children plutôt que parentElement.childNodes? L'ancien répertorie uniquement les enfants qui sont Elements, ignorant ainsi les nœuds qui sont Texts, par exemple... ça ne Serait pas mieux de supposer que l'enfant nœuds peuvent inclure tous les types de nœuds???
    • Par exemple, lorsque vous travaillez avec des éléments de la liste de <li> dans une liste ordonnée <ol>, vous ne voulez pas avoir l'espace blanc en retrait pour compter comme un enfant (en supposant que le document HTML est jolie).
    • À l'aide de childNodes sur les enfants est la bonne façon de faire ici.
    InformationsquelleAutor Felix Kling
  2. 27

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

    .insertBefore()

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

    dans votre cas, vous pouvez faire comme sur Felix Kling répondre 

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

    .insertAdjacentElement()

    referenceElement.insertAdjacentElement (where, newElement);

    dans votre cas, il serait

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

    .insertAdjacentHTML()

    referenceElement.insertAdjacentElement (where, newElementHTML);

    dans votre cas, il serait

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

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

    Puis,

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

    Tada!

    Être conscient lors de l'extension indigènes pourrait être gênant

    • Pourquoi donner un avertissement au lieu de simplement écrire une fonction générique qui peut être appelé le nœud parent?
    • A probablement été écrit principalement à la vanille js avec peu ou pas de dépendance, à l'époque, ce qui rend les extensions de nice. Avec le bundlers et systèmes de modules que nous avons aujourd'hui, un utilitaire paquet d'exposer une telle fonction serait probablement préférable.
    InformationsquelleAutor Leonard Pauli