JavaScript HTML DOM - Cambio de HTML
El HTML DOM permite que JavaScript cambie el contenido de los elementos HTML.
Cambio de contenido HTML
La forma más sencilla de modificar el contenido de un elemento HTML es mediante la innerHTML
propiedad.
Para cambiar el contenido de un elemento HTML, utilice esta sintaxis:
document.getElementById(id).innerHTML = new HTML
Este ejemplo cambia el contenido de un <p>
elemento:
Ejemplo
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Ejemplo explicado:
- El documento HTML anterior contiene un
<p>
elemento conid="p1"
- Usamos el HTML DOM para obtener el elemento con
id="p1"
- Un JavaScript cambia el contenido (
innerHTML
) de ese elemento a "¡Texto nuevo!"
Este ejemplo cambia el contenido de un <h1>
elemento:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Ejemplo explicado:
- El documento HTML anterior contiene un
<h1>
elemento conid="id01"
- Usamos el HTML DOM para obtener el elemento con
id="id01"
- Un JavaScript cambia el contenido (
innerHTML
) de ese elemento a "Nuevo encabezado"
Cambiar el valor de un atributo
Para cambiar el valor de un atributo HTML, use esta sintaxis:
document.getElementById(id).attribute = new value
Este ejemplo cambia el valor del atributo src de un <img>
elemento:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Ejemplo explicado:
- El documento HTML anterior contiene un
<img>
elemento conid="myImage"
- Usamos el HTML DOM para obtener el elemento con
id="myImage"
- Un JavaScript cambia el
src
atributo de ese elemento de "smiley.gif" a "landscape.jpg"
Contenido HTML dinámico
JavaScript puede crear contenido HTML dinámico:
Fecha: sábado 29 de enero de 2022 21:14:13 GMT+0000 (hora universal coordinada)
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
documento.escribir()
En JavaScript, document.write()
se puede usar para escribir directamente en el flujo de salida HTML:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Nunca lo use document.write()
después de cargar el documento. Sobrescribirá el documento.