node - javascript parent element

Cómo agregar un nodo infantil a una posición específica

Question

¿Cómo puedo agregar un childNode a una posición específica en javascript?

Quiero agregar un childNode a la 3ra posición en un div. Hay otros nodos detrás que necesitan retroceder (3 se convierte en 4, etc.)

Answer 1

Para insertar un nodo secundario en un índice específico

Simplificado,

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

Entonces,

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

Tada!

Tenga en cuenta que extender nativos podría ser problemático

Answer 2

Para esto tienes 3 opciones .insertBefore (), .insertAdjacentElement () o .insertAdjacentHtml ()

.insertBefore()

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

en tu caso, podrías hacer lo mismo que en la respuesta de Felix Kling

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

.insertAdjacentElement()

referenceElement.insertAdjacentElement (where, newElement);

en tu caso, sería

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

.insertAdjacentHTML()

referenceElement.insertAdjacentElement (where, newElementHTML);

en tu caso, sería

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

Answer 3

Puedes usar .insertBefore() :

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