HTML DOM JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

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

Cambiar contenido HTML

La forma más sencilla de modificar el contenido de un elemento HTML es mediante la propiedad innerHTML.

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

document.getElementById(id).innerHTML = new HTML

Este ejemplo cambia el contenido de un elemento <p>:

Ejemplo

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Ejemplo explicado:

  • El documento HTML anterior contiene un elemento <p> con id="p1"

  • Usamos HTML DOM para obtener el elemento con id="p1"

  • Un JavaScript cambia el contenido (innerHTML) de ese elemento a "Nuevo ¡texto!"

Este ejemplo cambia el contenido de un elemento <h1>:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html>

Ejemplo explicado:

  • El documento HTML anterior contiene un elemento <h1> con id="id01"

  • Usamos HTML DOM para obtener el elemento con id="id01"

  • Un JavaScript cambia el contenido (innerHTML) de ese elemento a "Nuevo Título"

Cambiar el valor de un atributo

Para cambiar el valor de un atributo HTML, utilice esta sintaxis:

document.getElementById(id).attribute = new value

Este ejemplo cambia el valor del atributo src de un elemento <img>:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

Ejemplo explicado:

  • El documento HTML anterior contiene un elemento <img> con id="myImage"

  • Usamos HTML DOM para obtener el elemento con id="myImage"

  • Un JavaScript cambia el atributo src de ese elemento de "smiley.gif" a "landscape.jpg"

Contenido HTML dinámico

JavaScript puede crear contenido HTML dinámico:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

documento.escribir()

En JavaScript, document.write() se puede utilizar para escribir directamente en HTML. flujo de salida:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p>Bla, bla, bla</p>

<script>
document.write(Date());
</script>

<p>Bla, bla, bla</p>

</body>
</html>

Nunca utilice document.write() después de cargar el documento. Va a sobrescribir el documento.