JavaScript HTML DOM - Cambiar HTML

HTML DOM permite que JavaScript cambie el contenido de los elementos HTML.

cambiar el flujo de salida HTML

JavaScript puede crear contenido HTML dinámico:

En JavaScript,document.write() Se puede usar para escribir directamente en el flujo de salida HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Prueba por tu cuenta

Nunca utilice document.write(). Esto cubrirá el documento.

cambiar el contenido HTML

El método más simple para modificar el contenido de un documento HTML es, usar innerHTML propiedad.

Para modificar el contenido de un elemento HTML, utilice esta sintaxis:

document.getElementById(id).innerHTML = nuevo texto

Este ejemplo cambia <p> El contenido del elemento:

Ejemplo

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Prueba por tu cuenta

Explicación del ejemplo:

  • El documento HTML superior contiene un elemento <p> con id="p1"
  • Usamos el DOM de HTML para obtener este elemento con id="p1"
  • JavaScript cambia el contenido del elemento (innerHTML) a "Hello Kitty!"

Este ejemplo cambia <h1> El contenido del elemento:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Prueba por tu cuenta

Explicación del ejemplo:

  • El HTML superior contiene un elemento <h1> con id="header"
  • Usamos el DOM de HTML para obtener el elemento con id="header"
  • JavaScript cambia el contenido de este elemento (innerHTML)

Cambiar el valor de la propiedad

Para cambiar el valor de una propiedad HTML, use la siguiente sintaxis:

document.getElementById(id).atributo = nuevo valor

Este ejemplo cambia <img> del elemento src Valor de la propiedad:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Prueba por tu cuenta

Explicación del ejemplo:

  • El documento HTML superior contiene un elemento <img> con id="myImage"
  • Usamos HTML DOM para obtener el elemento con id="myImage"
  • JavaScript cambia la propiedad src de este elemento de "smiley.gif" a "landscape.jpg"