Crear, agregar y eliminar elementos de páginas HTML. Eliminar: ¿Cómo insertar un elemento después de otro elemento en JavaScript sin utilizar una biblioteca? Agregar elemento js

En esta lección aprenderemos cómo crear nodos de elementos (createElement) y nodos de texto (createTextNode). También consideraremos métodos diseñados para agregar nodos al árbol (appendChild, insertBefore) y para eliminar nodos del árbol (removeChild).

Agregar nodos a un árbol

La adición de un nuevo nodo a un árbol suele realizarse en 2 etapas:

Cree el nodo requerido utilizando uno de los siguientes métodos:

• createElement(): crea un elemento (nodo) con el nombre especificado (etiqueta). El método createElement(elemento) tiene un parámetro requerido (elemento): es una cadena que contiene el nombre del elemento (etiqueta) que se va a crear. El nombre del elemento (etiqueta) en el parámetro debe estar en letras mayúsculas. Como resultado, este método devuelve el elemento que se creó.
• createTextNode(): crea un nodo de texto con el texto especificado. El método createTextNode(text) tiene un parámetro requerido (texto): es una cadena que contiene el texto del nodo de texto. Como resultado, este método devuelve el nodo de texto que se creó.

Especifique la ubicación en el árbol donde se debe insertar el nodo. Para hacer esto, debe utilizar uno de los siguientes métodos:

• appendChild(): agrega un nodo como último hijo del elemento en el que se llama este método. El método appendChild(nodo) tiene un parámetro obligatorio: el nodo que desea agregar. Como resultado, este método devuelve el nodo agregado.
• insertBefore(): inserta un nodo como nodo secundario del elemento en el que se llama este método. El método insertBefore(newNode,existingNode) tiene dos parámetros: newNode (obligatorio) es el nodo que desea agregar, existingNode (opcional) es el nodo secundario del elemento antes del cual desea insertar el nodo. Si no se especifica el segundo parámetro (existingNode), este método lo insertará al final, es decir como el último nodo hijo del elemento para el que se llama este método. El método insertBefore() devuelve el nodo insertado como resultado.

Por ejemplo:

• Computadora
• Computadora portátil
• Tableta

Consideremos un ejemplo más complejo en el que agregamos al árbol un nodo LI que contiene un nodo de texto con el texto "Smartphone" al final de la lista ul.

Para hacer esto necesitas hacer lo siguiente:

Crea un elemento (nodo) LI.

Cree un nodo de texto que contenga el texto "Smartphone".

Agregue el nodo de texto creado como el último nodo secundario del elemento LI recién creado

Agregue el nodo LI recién creado como el último nodo secundario del elemento ul

//crea un elemento (nodo) li var elementLI = document.createElement("li"); //crea un nodo de texto que contiene el texto "Smartphone" var textSmart= document.createTextNode("Smartphone"); //añade el nodo de texto creado como último elemento secundario al elemento LI recién creado elementLI.appendChild(textSmart); //obtenemos el elemento al que se agregará el nodo li creado como elemento var secundarioUL = document.getElementById("list"); //agrega el elemento li creado como último elemento secundario a la UL con id="list" elementUL.appendChild(elementLI);

Métodos AppendChild() e insertBefore() cuando se trabaja con nodos existentes

El trabajo con nodos existentes utilizando los métodos appendChild() e insertBefore() también se realiza en 2 etapas:

Obtenga un nodo existente en el árbol.

Especifique la ubicación donde se debe insertar el nodo utilizando el método appendChild() o insertBefore(). Esto eliminará el nodo de su ubicación anterior.

Por ejemplo, agregue un elemento li existente que contenga el texto "Tableta" al principio de la lista (esto lo eliminará del lugar anterior):

//obtenemos el elemento UL que contiene la lista por su id var elementUL = document.getElementById("list"); //obtenemos el elemento li que contiene el nodo de texto "Tablet" var elementLI = elementUL.childNodes; //agrega un elemento al principio de la lista //en este caso se eliminará de su ubicación original elementUL.insertBefore(elementLI,elementUL.firstChild);

Ejercicio

• Hay dos listas en el documento. Debe mover elementos de la segunda lista a la primera.
• Crea una lista, un campo de texto y 2 botones. Escribe código en JavaScript que, dependiendo del botón presionado, agregue el texto del campo de texto al principio o al final de la lista.

Eliminando nodos

La eliminación de un nodo de un árbol se realiza en 2 etapas:

Obtenga (encuentre) este nodo en el árbol. Esta acción normalmente se realiza mediante uno de los siguientes métodos: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() o querySelectorAll() .

Llame al método removeChild() en el nodo padre, al que se le debe pasar como parámetro el nodo que queremos eliminar del mismo.
El método removeChild() devuelve el nodo eliminado como su valor, o nulo si el nodo que queríamos eliminar no existía.

//buscamos el nodo que queremos eliminar var findElement = document.getElementById("notebook"); // llama al método removeChild en el nodo padre // y le pasa el nodo encontrado como parámetro findElement.parentNode.removeChild(findElement);

Por ejemplo, elimine el último elemento secundario de un elemento que tenga id="myID" :

//obtiene el elemento que tiene id="myID" var myID = document.getElementById("myID"); //obtiene el último nodo secundario del elemento myID var lastNode = myID.lastChild; //porque no sabemos si el último nodo hijo del elemento es un elemento, //entonces usaremos un bucle while para encontrar el último hijo del elemento myID //siempre que el elemento tenga un nodo y su tipo no sea 1 (es decir, no es un elemento) ejecutar while (lastNode && lastNode.nodeType!=1) ( //ir al nodo anterior lastNode = lastNode.previousSibling; ) //si encontramos un elemento en el nodo myID if (lastNode) ( //entonces se debe eliminar lastNode.parentNode.removeChild( lastNode); )

Por ejemplo, elimine todos los nodos secundarios de un elemento que tenga id="myQuestion" :

//obtenemos el elemento del que queremos eliminar todos sus nodos secundarios var elementQuestion = document.getElementById("myQuestion"); //mientras exista el primer elemento while (elementQuestion.firstElement) ( //eliminarlo elementQuestion.removeChild(element.firstChild); )

Ejercicio

Escriba una función que elimine todos los nodos de texto de un elemento.

Hay 2 listas (), escriba un código JavaScript que elimine todos los elementos de las listas 1 y 2.

Esta es la cuarta parte de las publicaciones dedicadas a los equivalentes nativos de los métodos jQuery. Quizás quieras leer esto antes de continuar.

En este artículo veremos formas de crear, insertar, mover y eliminar elementos. Y aunque jQuery ya contiene una gran cantidad de métodos útiles, te sorprenderá saber que todo esto se puede hacer fácilmente utilizando métodos nativos.

Manipulación del código HTML de elementos jQuery // get var html = $(elem).html(); // establecer $(elem).html("Nuevo html"); JS nativo // obtener var html = elem.innerHTML; // establecer elem.innerHTML = "Nuevo html"; Manipulación de texto del elemento jQuery // obtener var text = $(elem).text(); // establecer $(elem).text("Nuevo texto"); JS nativo // obtener var text = elem.textContent; // establecer elem.textContent = "Nuevo texto"; Creando un elemento jQuery $(""); Documento JS nativo.createElement("div"); Agrega contenido al final de los elementos jQuery $(parentNode).append(newNode); JS nativo parentNode.appendChild(newNode); Agrega contenido al comienzo de los elementos jQuery $(referenceNode).prepend(newNode); Referencia JS nativaNode.insertBefore(newNode, referenceNode.firstElementChild); // o referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Insertar directamente antes de un elemento jQuery $(referenceNode).before(newNode); Referencia JS nativaNode.parentNode.insertBefore(newNode, referenceNode); // o referenceNode.insertAdjacentElement("antes de comenzar", newNode); // FF 48.0+, IE8+ Insertar directamente después de un elemento jQuery $(referenceNode).after(newNode); Referencia JS nativaNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // o referenceNode.insertAdjacentElement("afterend", newNode); //FF 48.0+, IE8+

Nota: 'beforebegin' y 'afterend' solo funcionarán si el nodo de referencia está en el árbol DOM y tiene un elemento principal.

Mira lo siguiente:

ReferenceNode.insertAdjacentElement(posición, nodo);

El método insertAdjacentElement toma dos parámetros:

• posición: posición relativa al nodo de referencia, debe ser una de las siguientes:
  • 'beforebegin': antes del elemento mismo.
  • 'afterbegin': dentro del elemento, antes del primer hijo.
  • 'beforeend': dentro del elemento, después del último hijo.
  • 'afterend' - Después del elemento en sí.
• nodo — nodo para insertar

Contenido del texto

Algún texto Algún texto var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("antes del fin", elem2); // resultado Algún textoAlgún texto

El método insertAdjacentElement es más limpio e intuitivo que el método insertBefore, pero este último es mejor compatible con navegadores más antiguos.

Agregar elementos varias veces

También vale la pena señalar que agregar un elemento a un nodo ubicado en el árbol DOM conducirá a un nuevo dibujo. Esto no es muy bueno porque el navegador debe recalcular el tamaño y la posición del nuevo elemento, lo que también provocará cambios en los descendientes, antepasados ​​y elementos que aparecen después de él en el DOM. Si agrega muchos elementos al DOM, esto puede llevar algún tiempo.

Para evitar esto, puedes agregarlo con DocumentFragment. Un fragmento de documento es un objeto de documento que existe solo en la memoria, por lo que agregarlo no provocará ningún reflujo.

Digamos que necesitamos agregar 100 elementos li a un elemento ul que está presente en el árbol DOM:

// Obtenemos el elemento que contendrá nuestros elementos var ul = document.querySelector("ul"); // crear 100 elementos de lista para (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

En el ejemplo anterior, los elementos li se agregan directamente al elemento ul, que se encuentra en el árbol DOM, por lo que se volverá a dibujar en cada iteración: ¡eso son 100 cambios!

Busquemos una mejor manera.

// Obtenemos el elemento que contendrá nuestros elementos var ul = document.querySelector("ul"); // crea un fragmento de documento para agregar los elementos de la lista a var docFrag = document.createDocumentFragment(); // crear 100 elementos de lista para (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

En el mismo ejemplo, los elementos li se agregan al fragmento del documento en la memoria, de modo que el reflujo se activará cuando el fragmento se agregue al elemento ul. Este método reducirá el número de redibujos de 100 a 1.

Eliminar un elemento jQuery $(referenceNode).remove(); Referencia JS nativaNode.parentNode.removeChild(referenceNode); // o referenceNode.remove(); // FF 23.0+, 23.0+, Edge (sin soporte para IE)

Si necesitas crear un elemento HTML y no sabes cómo implementarlo, entonces has venido al lugar correcto. Este artículo no solo verá un ejemplo de creación de un elemento, sino que también escribirá una función universal con la que puede crear un nuevo elemento, agregarle varios atributos y llenarlo con texto.

Pero primero, comencemos con algo simple. Al crear un nuevo elemento, usaremos los métodos del objeto DOM, a saber:

* document.createElement(param): este método se utiliza directamente para crear un elemento. Como parámetro toma el nombre del elemento que se está creando y devuelve un enlace al elemento creado.

documento.createElement('div'); // creará un elemento div.

* document.appendChild(param): este método se utiliza para agregar un elemento al código HTML. Toma un enlace al elemento creado como parámetro;

var padre = document.getElementsByTagName("CUERPO"); //obtenemos un enlace al elemento del cuerpo

var elem = document.createElement('div');// creará un elemento div

parent.appendChild(elem);//agrega un elemento, donde parent es el enlace donde se agregará nuestro elemento, en este caso es el cuerpo body;

* document.createTextNode(): el método se utiliza para colocar texto dentro de un elemento.

Un ejemplo de creación de un elemento.

función crearElem() (

Var nuevoP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "miPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var texto = "texto a insertar";

Var textNode = document.createTextNode(texto);

NewP.appendChild(textNode);

Padre.appendChild(newP);

En la función createElem, la variable principal es una referencia al elemento (cuerpo) en el que se colocará el nuevo elemento. Luego se crea un nuevo elemento P, se le agregan los atributos id, clase, estilo y se establecen los valores de estos atributos. Luego se crea un nodo de texto y se agrega a nuestro nuevo elemento. Después de todo esto, el elemento en sí se agrega al cuerpo del cuerpo. Para realizar una gran cantidad de elementos nuevos tendrás que trabajar duro, porque... es posible que deba colocarlos en diferentes lugares de la página web, p. adjuntar a diferentes elementos.

Un ejemplo de creación de un elemento utilizando una función universal.

Esta función le ayudará a crear un nuevo elemento, agregarle varios atributos, adjuntarle un nodo de texto, colocarlo antes o después del elemento especificado o reemplazar el elemento con un elemento recién creado. Sólo se requiere el argumento de nombre.

función createElement(nombre, atributos, estilo, texto, pasado_id, posición, cambiado) (

Var padre = document.getElementsByTagName("CUERPO");

Var e = document.createElement(nombre);

Si (atributos) (

Para (ingrese atributos) (

Si (clave == "clase") (

E.className = atributos;

) si no (clave == "id") (

E.id = atributos;

) demás (

E.setAttribute(clave, atributos);

Si (estilo) (

Para (teclear estilo) (

E.estilo = estilo;

Si (texto) (

E.appendChild(document.createTextNode(texto));

Padre.appendChild(e);

Si(pasado_id)(

Var old_elem = document.getElementById(pasado_id);

Si(posición=="antes")(

Parent.insertBefore(e,old_elem)

)si no(posición=="después")(

InsertAfter(padre,e,old_elem);

Si(cambiado!="" && cambiado==verdadero)(

Padre.removeChild(old_elem);

Opciones:

Nombre – nombre del elemento;

Attrs – atributos del elemento creado;

Estilo – estilos del elemento creado;

Texto – texto insertado;

Past_id – id del elemento junto al cual se ubicará nuestro elemento;

Posición: puede tomar dos valores antes y después;

Cambiado: una bandera que toma dos valores: verdadero o falso. Si este parámetro se establece en verdadero, el elemento antiguo será reemplazado por uno nuevo;

Como ejemplo, creemos un elemento DIV con atributos y reemplacemos el elemento antiguo por el recién creado.

crearElemento("div",

("clase": "myDivCSSClass", "id": "myDivId","align":"centro"),

("ancho": "200px", "alto": "250px", "fondo": "#3B9D00", "color": "#fff"),

"aquí está mi texto",

"prueba",

"antes"

Si alguna vez escribiste JavaScript y tuviste que escribir algo como:
var p = documento.createElement("p");
p.appendChild(document.createTextNode("Pez pez real."));
var div = document.createElement("div");
div.setAttribute("id", "nuevo");
div.appendChild(p);

entonces esto te puede resultar útil.

Problema: cuando creas más de un elemento anidado uno dentro del otro, el código se vuelve muy complejo.

Ofrezco una herramienta sencilla para resolver el problema: la función create() (código fuente a continuación). Por ejemplo, creemos un párrafo de texto:
var el = create("p", ( ), "¡Adiós, amor!");

O un div con un párrafo y un enlace dentro:
var div = crear("div", ( id: "nuevo", estilo: "fondo:#fff"),
crear("p", (alinear: "centro"),
"introducción: ",
crear("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"imagen"),
": fin")
);

O aquí hacemos una tabla:
var titular = document.getElementById("titular2");
tabla de variables;
var td;
titular.appendChild(
tabla =
crear("tabla", (id: "feo", cols:3),
crear("tcuerpo", (),
crear("tr", (),
crear("td", (ancho: "10%"),
"Hola"),
td =
crear("td", (estilo: "fondo: #fcc"),
"allá")
crear("td", ( Clase: "especial2"), "en todas partes")
)
);

Tenga en cuenta: 1. IE requiere un elemento tbody; de lo contrario, se niega a mostrar la tabla.
2. El atributo de clase entra en conflicto con algo, por lo que debes escribirlo como Clase. Esto no parece tener ningún efecto sobre el resultado.
3. table = y tr = en el ejemplo le permiten guardar los objetos anidados creados para seguir trabajando con ellos.
4. Este código funciona en IE, Mozilla y Opera. La función en sí crea(nombre, atributos) (
var el = document.createElement(nombre);
if (tipo de atributos == "objeto") (
para (var i en atributos) (
el.setAttribute(i, atributos[i]);

Si (i.toLowerCase() == "clase") (
el.className = atributos[i]; // para compatibilidad con IE

) si no (i.toLowerCase() == "estilo") (
el.style.cssText = atributos[i]; // para compatibilidad con IE
}
}
}
para (var i = 2;i< arguments.length; i++) {
var val = argumentos[i];
if (tipo de val == "cadena") (val = document.createTextNode(val));
el.appendChild(val);
}
devolver el;
}

Debemos agradecer a Ivan Kurmanov la idea.
Artículo original con ejemplos prácticos:

¡Hola! Con JavaScript, no solo puede encontrar elementos en una página (lea sobre cómo hacerlo), sino también crear elementos dinámicamente y agregarlos al DOM. Cómo hacer esto se discutirá en esta lección.

Para crear un nuevo elemento en una página web, el objeto documento tiene los siguientes métodos:

• createElement(elementName): crea un nuevo elemento, cualquier etiqueta de página HTML debe pasarse como parámetro, devuelve un elemento HTML
• createTextNode(texto): crea un nodo de texto y devuelve el mismo.

Agregar un elemento

Veamos un pequeño ejemplo:

Var el = document.createElement("div"); var elText = document.createTextNode("Hola mundo");

Como puede ver en el ejemplo, la variable elem almacenará un enlace al nuevo elemento div. Sin embargo, como comprenderá, crear elementos no es suficiente; aún es necesario agregarlos a la página web. Después de todo, cuando creamos elementos de esta manera, parecen estar en algún tipo de espacio virtual o en la memoria, pero para mostrarlos en una página web, existen métodos especiales.

Los siguientes métodos se utilizan para agregar elementos a una página web:

• appendChild(newNode): agrega un nuevo elemento al final del elemento en el que se llamó este método
• insertBefore(newNode, referenceNode): agrega un nuevo nodo antes del nodo especificado como segundo parámetro.

Veamos un ejemplo de cómo adjuntar un elemento a una página web usando el método appendChild:

Título del artículo

Primer párrafo

Segundo parrafo

var artículo = document.querySelector("div.artículo"); // crea un elemento var el = document.createElement("h3"); // crea texto para ello var elTxt = document.createTextNode("Hola mundo"); // agrega texto al elemento como elemento secundario el.appendChild(elTxt); // agrega un elemento al bloque div artículo.appendChild(el);

El ejemplo creó un elemento de encabezado h3 normal y un nodo de texto. Luego, el nodo de texto se agrega al elemento de título. Luego, el título se agrega a uno de los elementos de la página web para que pueda verse en la página.

Pero no es en absoluto necesario tener un nodo de texto adicional para crear texto dentro de un elemento, para ello existe la propiedad textContent, que permite asignar texto directamente a un elemento.

Var el = document.createElement("h3"); el.textContent = "Hola, soy el título";

En este caso, el texto se creará implícitamente al configurar el texto directamente.

Y veamos también cómo agregar este elemento al comienzo de una colección de nodos secundarios de un div:

Var artDiv = document.querySelector("div.article"); // crea un elemento var el = document.createElement("h2"); // crea texto para ello var eltxt = document.createTextNode("Hola mundo"); // agrega texto al elemento como elemento secundario el.appendChild(eltxt); // obtenemos el primer elemento que irá precedido por la suma var firstEl = artDiv.firstChild.nextSibling; // agrega un elemento al bloque div antes del primer nodo artDiv.insertBefore(el, firstEl);

Si de repente necesita agregar un nuevo nodo al segundo, tercer o cualquier otro lugar, entonces necesita encontrar el nodo antes del cual necesita insertarlo usando las siguientes propiedades firstChild/lastChild o nextSibling/previousSibling.

Copiando un elemento

Hay situaciones en las que los elementos tienen una composición bastante compleja y es más fácil copiarlos. Para esto se utiliza un método cloneNode() separado.

Var artDiv = document.querySelector("div.article"); // clonar el elemento artDiv var newArtDiv = artDiv.cloneNode(true); // agregar al final del elemento del cuerpo document.body.appendChild(newArtDiv);

Debe pasar un valor booleano como parámetro al método cloneNode(): si pasa verdadero, el elemento se copiará junto con todos los nodos secundarios; si pasa falso, se copiará sin nodos secundarios. En este ejemplo, copiamos el elemento junto con su contenido y lo agregamos al final de la página web.

Eliminando un elemento

Para eliminar un elemento, debe llamar al método removeChild(). Este método eliminará uno de los nodos secundarios:

Var artDiv = document.querySelector("div.article"); // busca el nodo que eliminaremos: el primer párrafo var removNode = document.querySelectorAll("div.article p"); // eliminar el nodo artDiv.removeChild(removNode);

Este ejemplo eliminará el primer párrafo del bloque div.

Reemplazo de un elemento

Para reemplazar un elemento por otro, utilice el método replaceChild(newNode, oldNode). Este método toma un nuevo elemento como primer parámetro, que reemplaza el elemento antiguo pasado como segundo parámetro.

Var artDiv = document.querySelector("div.article"); // busca el nodo que reemplazaremos - el primer párrafo var old = document.querySelectorAll("div.article p"); // crea un elemento var new = document.createElement("h3"); // crea texto para ello var elemtxt = document.createTextNode("Hola mundo"); // agrega texto al elemento como elemento secundario new.appendChild(elemtxt); // reemplaza el nodo antiguo por uno nuevo artDiv.replaceChild(new, old);

En este ejemplo, reemplazamos el primer párrafo con el encabezado h2 que acabamos de crear.

RESULTADOS.

Para crear un elemento, se utilizan los siguientes métodos:

document.createElement(etiqueta): crea un nuevo elemento.

document.createTextNode(texto): crea un nodo de texto

Métodos para insertar y quitar nodos.

• parent.appendChild(el): agrega un elemento al final de un elemento existente
• parent.insertBefore(el, nextSibling): inserta un elemento antes de un elemento existente
• parent.removeChild(el) - elimina un elemento
• parent.replaceChild(newElem, el) - reemplaza un elemento por otro
• parent.cloneNode(bool): copia un elemento, si el parámetro bool=true entonces el elemento se copia con todos los elementos secundarios, y si es falso entonces sin elementos secundarios

Tareas Función de insertar elementos.

Escriba una función insertAfter(newEl,oldEl) que inserte un elemento tras otro en la función misma, los elementos mismos se pasan como parámetros.