El DOM HTML permite JavaScript para cambiar el contenido de los elementos HTML.
Cambio de la secuencia de salida HTML
JavaScript puede crear contenido HTML dinámico:
Fecha:Dom Nov 06 19:23:35 GMT el año 2016 + 0800 (中国标准时间)
En JavaScript, document.write() se puede utilizar para escribir directamente en la corriente de salida HTML:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Inténtalo tú mismo " Nunca use document.write() , después de cargar el documento. Se sobrescribirá el documento.
Cambio de contenido HTML
La forma más sencilla de modificar el contenido de un elemento HTML es usando el innerHTML propiedad.
Para cambiar el contenido de un elemento HTML, utilice la siguiente sintaxis:
document.getElementById(id).innerHTML = new HTML
En este ejemplo se 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>
Inténtalo tú mismo " En este ejemplo se cambia el contenido de un <h1> 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>
Inténtalo tú mismo " Ejemplo explicó:
- El documento HTML anterior contiene un <h1> elemento con id="header"
- Utilizamos el DOM HTML para obtener el elemento con id="header"
- Un JavaScript cambia el contenido (innerHTML) de dicho elemento
Cambiar el valor de un atributo
Para cambiar el valor de un atributo HTML, utilice la siguiente sintaxis:
document.getElementById(id).attribute=new value
En este ejemplo se 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>
Inténtalo tú mismo " Ejemplo explicó:
- El documento HTML anterior contiene un <img> elemento con id="myImage"
- Utilizamos el DOM HTML para obtener el elemento con id="myImage"
- Un JavaScript cambia la src atributo de ese elemento de "smiley.gif" a "landscape.jpg"
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »