Latest web development tutorials

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

<div id="div1">
<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>:

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

Para añadir texto al elemento <p>, primero debe crear un nodo de texto. Este código crea un nodo de texto:

var node=document.createTextNode("This is a new paragraph.");

A continuación, debe agregar el nodo de texto para el elemento <p>:

para.appendChild(node);

Por último, debe agregar este nuevo elemento a los elementos existentes.

Este código se encuentra a un elemento existente:

var element=document.getElementById("div1");

El código para agregar un nuevo elemento a los elementos existentes:

element.appendChild(para);

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

<div id="div1">
<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

<div id="div1">
<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:

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

Encuentra id = "elementos" Div1:

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

Encuentra Identificación del elemento <P> = "p1":

var child=document.getElementById("p1");

Retirar del elemento padre sub-elementos:

parent.removeChild(child);

lámpara ¿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:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Reemplazar los elementos HTML

Para volver a colocar los elementos DOM HTML, utilice el método replaceChild ():

Ejemplos

<div id="div1">
<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 »