elementos DOM HTML
Añadir, eliminar y sustituir los elementos HTML.
Crear un nuevo elemento HTML - appendChild ()
Para añadir un nuevo elemento a la DOM HTML, primero debe crear el elemento y añadirlo a los elementos existentes.
Ejemplos
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
Trate »
Ejemplos de analítica
Este código crea un nuevo elemento <p>:
Para añadir texto al elemento <p>, primero debe crear un nodo de texto. Este código crea un nodo de texto:
A continuación, debe agregar el nodo de texto para el elemento <p>:
Por último, debe agregar este nuevo elemento a los elementos existentes.
Este código se encuentra a un elemento existente:
El código para agregar un nuevo elemento a los elementos existentes:
Crear un nuevo elemento HTML - insertBefore ()
En un ejemplo de appendChild () método, el nuevo elemento en último elemento hijo del elemento padre para agregar.
Si no desea esto, se puede utilizar el método insertBefore ():
Ejemplos
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
Trate »
Quitar los elementos HTML existentes
Para eliminar elementos HTML, se debe conocer el elemento padre del elemento:
Ejemplos
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
Trate »
Ejemplos de analítica
Este documento contiene elemento HTML <div> en uno de los dos nodos hijos (dos <p> elemento) con el:
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Encuentra id = "elementos" Div1:
Encuentra Identificación del elemento <P> = "p1":
Retirar del elemento padre sub-elementos:
¿Puedo eliminar un elemento en el caso no se refiere al elemento padre? Lo siento. DOM necesitan comprender los elementos que desea eliminar, así como su elemento padre. |
Éstos son una solución común: encontrar sub-elementos que necesita para eliminar, y luego usar el atributo parentNode para encontrar su elemento padre:
child.parentNode.removeChild(child);
Reemplazar los elementos HTML
Para volver a colocar los elementos DOM HTML, utilice el método replaceChild ():
Ejemplos
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
Trate »