DOM
Manipulando Elementos
Buscar..
Elementos de clonacion
Un elemento se puede clonar invocando el método cloneNode . Si el primer parámetro pasado a cloneNode es true , los hijos del original también se clonarán.
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
Añadiendo un elemento
En este ejemplo, creamos un nuevo elemento de lista con el texto "nuevo texto", y seleccionamos la primera lista desordenada y su primer elemento de lista.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Al insertar un elemento, lo hacemos debajo del elemento primario, y justo antes de un elemento secundario particular de ese elemento principal.
parentElement.insertBefore(newElement, nextSibling);
El nuevo elemento se inserta debajo de
parentElementy justo antes denextSibling.
Cuando uno quiere insertar un elemento como el último elemento secundario de parentElement , el segundo argumento puede ser null .
parentElement.insertBefore(newElement, null);
El nuevo elemento se inserta bajo
parentElementcomo el último elemento secundario.
En su lugar, appendChild() se puede usar para simplemente agregar el hijo a los hijos del nodo padre.
parentElement.appendChild(newElement);
El nuevo elemento se inserta bajo
parentElementcomo el último elemento secundario.
Reemplazo de un elemento
En este ejemplo, creamos un nuevo elemento de lista con el texto "nuevo texto", y seleccionamos la primera lista desordenada y su primer elemento de lista.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Para reemplazar un elemento, usamos replaceChild :
parentElement.replaceChild(newElement, nextSibling);
nextSiblingse elimina del DOM. En su lugar está ahora el elementonewElement.
Eliminando un elemento
Se puede eliminar un elemento llamando a remove() en él. Alternativamente, uno puede llamar a removeChild() en su padre. removeChild() tiene mejor soporte de navegador que remove() .
element.remove();
element, y todos sus childnodes, se eliminan del DOM.
parentElement.removeChild(element);
element, y todos sus childnodes, se eliminan del DOM.
En cualquier caso, se puede insertar este nodo en el DOM en un momento posterior, siempre y cuando todavía haya referencias a este nodo.
Añadir y Preponer métodos
JavaScript ahora tiene los métodos Append y Prepend que estaban presentes en jQuery
La principal ventaja de append y prepend es a diferencia de appendChild e insertBefore , puede tomar cualquier número de argumentos, ya sea elemento HTML o texto sin formato (que se convertirá en nodos de texto).
Para añadir dig 1 div, 1 nodo de texto y 1 tramo
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
Esto cambiará la página a la siguiente estructura
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
Anteponer lo mismo en cuerpo.
Utilizar
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
Esto cambiará la página a la siguiente estructura
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
Tenga en cuenta que los soportes del navegador son
Chrome 54+
Firefox 49+
Opera 39+
Lea más en MDN