Comparación detallada de js AppendChild e insertBefore uso

Sabemos que appendChild e insertBefore tienen la función de insertar nodos. Pero en la aplicación, todavía existen algunas diferencias entre los dos.

Por ejemplo, cuando queremos insertar un nodo hijo P en el siguiente div:

<div id="test"><p id="x1">Nodo</p><p>Nodo</p></div>

Podemos escribir así (agregue otro comentario cuando pruebe una situación determinada):

Copie el código de código de la siguiente manera:

<tipo de script="texto/javascript">

var oTest = document.getElementById("prueba");

var nuevoNodo = document.createElement("p");

newNode.innerHTML = "Esto es una prueba";

//La prueba comienza aquí

//método appendChild:

oTest.appendChild(nuevoNodo);

//insertar antes del método:

oTest.insertBefore(nuevoNodo,nulo);

</script>

A través del código anterior, puede probar que se crea un nuevo nodo bajo el nodo div, y que este nodo es el último nodo del div. (Para ver el DOM, IE puede verlo a través del complemento IE Developer Toolbar y Firefox puede usar Firebug)

Obviamente, a través de este ejemplo, podemos saber que tanto appendChildhild como insertBefore pueden insertar nodos.

En el ejemplo anterior, existe un código de este tipo: oTest.insertBefore(newNode,null). Aquí insertBefore tiene dos parámetros que se pueden configurar. El primero es el mismo que appendChild, pero el segundo es exclusivo. No sólo puede ser nulo, sino que también puede ser:

Copie el código de código de la siguiente manera:

<tipo de script="texto/javascript">

var oTest = document.getElementById("prueba");

var refChild = document.getElementById("x1");

var nuevoNodo = document.createElement("p");

newNode.innerHTML = "Esto es una prueba";

oTest.insertBefore(newNode,refChild);

</script>

Este ejemplo insertará un nuevo nodo delante del nodo x1

O:

Copie el código de código de la siguiente manera:

<tipo de script="texto/javascript">

var oTest = document.getElementById("prueba");

var refChild = document.getElementById("x1");

var nuevoNodo = document.createElement("p");

newNode.innerHTML = "Esto es una prueba";

oTest.insertBefore(newNode,refChild.nextSibling);

</script>

Este ejemplo insertará un nuevo nodo antes del siguiente nodo del nodo x1

También disponible para:

Copie el código de código de la siguiente manera:

<tipo de script="texto/javascript">

var oTest = document.getElementById("prueba");

var nuevoNodo = document.createElement("p");

newNode.innerHTML = "Esto es una prueba";

oTest.insertBefore(newNode,oTest.childNodes[0]);

</script>

Este ejemplo insertará un nuevo nodo delante del primer nodo secundario. También puede insertar nuevos nodos en otras ubicaciones cambiando childNodes[0,1,...]

Dado que se puede ver que el método insertBefore () es insertar un nuevo nodo delante del nodo secundario existente, pero en el Ejemplo 1, el método insertBefore () también se puede usar para insertar un nuevo nodo al final del nodo secundario. lista de nodos. Combinando las dos situaciones, se descubre que el método insertBefore() puede insertar un nodo en cualquier posición de la lista de nodos secundarios.

De estos ejemplos:

El método appendChild() agrega un nuevo nodo secundario al final de la lista de nodos secundarios de un nodo.

El método insertBefore() inserta un nuevo nodo en cualquier posición en la lista de nodos secundarios del nodo.