JavaScript HTML DOM Elementos (Nodos)

Agregar y eliminar nodos (elementos HTML)

Crear un nuevo elemento HTML (nodo)

Para agregar un nuevo elemento al DOM de HTML, primero debe crear este elemento (nodo de elemento) y luego agregarlo al elemento existente.

Ejemplo

<div id="div1">
<p id="p1">Este es un párrafo.</p>
<p id="p2">Este es otro párrafo.</p>
</div>
<script>
var para = document.createElement("p");
var nodo = document.createTextNode("Este es el texto nuevo.");
para.appendChild(nodo);
insertBefore()
var element = document.getElementById("div1");appendChild(para);
</script>

Prueba personal

ejemplo de explicación

这段代码创建了一个新的 <p> elemento：

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

Este código crea un nuevo <p> Si desea agregar

Agregar texto a un elemento, debe crear primero un nodo de texto. Este código crea un nodo de texto：

var node = document.createTextNode("Este es un nuevo párrafo."); <p> Luego necesita agregar este texto a

para.appendChild(nodo);

Añadir este texto al elemento：

Finalmente，debe agregar este nuevo elemento a un elemento existente。

insertBefore()

Este código busca un elemento existente：

Este código agrega un nuevo elemento a este elemento existente：

element.appendChild(para);

Crear nuevo elemento HTML - insertBefore() En el ejemplo anterior， appendChild()

método，agregar un nuevo elemento como el último hijo del padre. Además，puede usar Método:

Ejemplo

<div id="div1">
<p id="p1">Este es un párrafo.</p>
<p id="p2">Este es otro párrafo.</p>
</div>
<script>
var para = document.createElement("p");
var nodo = document.createTextNode("Este es el texto nuevo.");
para.appendChild(nodo);
insertBefore()
var hijo = document.getElementById("p1");
var element = document.getElementById("div1");element.(para, hijo);
</script>

Prueba personal

insertBefore

eliminar elemento HTML existente remove() Método:

Ejemplo

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
Si desea eliminar un elemento HTML，utilice
</script>

Prueba personal

ejemplo de explicación

const elmnt = document.getElementById("p1"); elmnt.remove(); <p> elemento）de <div> elemento：

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Este documento HTML contiene un elemento con dos nodos hijos (dos

Encuentra el elemento que se debe eliminar：

const elmnt = document.getElementById("p1"); remove() Método:

Luego ejecute

elmnt.remove();Advertencia： El método remove() no funciona en navegadores antiguos，por favor, consulte el siguiente ejemplo para saber cómo cambiar aremoveChild()

。

eliminar el nodo hijo remove() Para poder eliminar un elemento en un navegador que no admite

Ejemplo

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const hijo = document.getElementById("p1");
parent.removeChild(child);
</script>

Prueba personal

ejemplo de explicación

Este documento HTML contiene un elemento con dos nodos hijos (dos <p> elemento）de <div> elemento：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

encuentra id="div1" elemento：

const parent = document.getElementById("div1");

encuentra id="p1" de <p> elemento：

const hijo = document.getElementById("p1");

Eliminar el hijo de un elemento padre：

parent.removeChild(child);

Esta es una solución común：encuentra el nodo hijo que se debe eliminar y usa su parentNode El atributo encuentra el nodo padre：

const hijo = document.getElementById("p1");
hijo.parentNode.removeChild(hijo);

Reemplazar elemento HTML

Para reemplazar un elemento, utilice replaceChild() Método:

Ejemplo

<div id="div1">
<p id="p1">Este es un párrafo.</p>
<p id="p2">Este es otro párrafo.</p>
</div>
<script>
var para = document.createElement("p");
var nodo = document.createTextNode("Este es el texto nuevo.");
para.appendChild(nodo);
var padre = document.getElementById("div1");
var hijo = document.getElementById("p1");
padre.replaceChild(para, hijo);
</script>

Prueba personal