HTML DOM - Modificar
Modificar HTML = cambiar elementos, atributos, estilos y eventos.
Modificar elementos HTML
Modificar el HTML DOM significa muchos aspectos diferentes:
- Cambiar contenido HTML
- Cambiar estilos CSS
- Cambiar atributos HTML
- Crear nuevos elementos HTML
- Eliminar elementos HTML existentes
- Cambiar eventos (manejadores)
En los próximos capítulos, profundizaremos en los métodos comunes para modificar el HTML DOM.
Crear contenido HTML
La forma más sencilla de cambiar el contenido de un elemento es usar la propiedad innerHTML.
El siguiente ejemplo cambia el contenido HTML de un elemento <p>:
Ejemplo
<p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="Nuevo texto!";</script>
<p>El contenido del párrafo se modifica mediante un script.</p>
Pruébelo »
 |
Le explicaremos los detalles del ejemplo en los siguientes capítulos. |
|---|
Cambiar el estilo HTML
A través del HTML DOM, puede acceder al objeto de estilo de un elemento HTML.
El siguiente ejemplo cambia el estilo HTML de un párrafo:
Ejemplo
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
Pruébelo »
Crear nuevos elementos HTML
Para agregar un nuevo elemento al HTML DOM, primero debe crear el elemento (nodo de elemento) y luego agregarlo a un 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 node=document.createTextNode("Este es un nuevo párrafo."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para);</script>
Pruébelo »