1. Home
  2. JavaScript HTML DOM cambia el contenido HTML

El mejor tutorial de JavaScript HTML DOM cambia el contenido HTML en 2024. En este tutorial podrás aprender Cambiar el flujo de salida HTML,Ejemplos,Cambiar el contenido HTML,Ejemplos,Ejemplos,Cambiar los atributos HTML,Ejemplos,

JavaScript HTML DOM cambia el contenido HTML

HTML DOM permite JavaScript para cambiar el contenido del elemento HTML.

Cambiar el flujo de salida HTML

JavaScript puede crear contenido HTML dinámico:

La fecha de hoy es:Wed Sep 29 2021 11:24:44 GMT+0800 (中国标准时间)

En JavaScript, document.write () se puede utilizar para escribir directamente el contenido HTML a la corriente de salida.

Ejemplos

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Trate »

lámpara Nunca use document.write después de que el documento ha terminado de cargar (). Esto anula el documento.

Cambiar el contenido HTML

El uso de la propiedad innerHTML La forma más fácil de modificar el contenido HTML.

Para cambiar el contenido del elemento HTML, utilice la siguiente sintaxis:

document.getElementById(id).innerHTML=新的 HTML

En este ejemplo se cambia el contenido del elemento <p>:

Ejemplos

<Html>
<Cuerpo>

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

<Script>
document.getElementById ( "P1") innerHTML = "nuevo texto !.";
</ Script>

</ Body>
</ Html>

Trate »

En este ejemplo se cambia el contenido del elemento <h1>:

Ejemplos

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

</body>
</html>

Trate »

Ejemplos que ilustran:

  • El documento HTML anterior que contiene id = "header" del elemento <h1>

  • Utilizamos el DOM HTML para obtener el elemento id = "header"

  • JavaScript cambios en los contenidos de este elemento (innerHTML)

Cambiar los atributos HTML

Para cambiar las propiedades de un elemento HTML, utilice la siguiente sintaxis:

document.getElementById(id).attribute=新属性值

En este ejemplo se cambia el elemento de atributo src <img>:

Ejemplos

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Trate »

Ejemplos que ilustran:

  • El documento HTML anterior que contiene id = "imagen" del elemento <img>
  • Utilizamos el DOM HTML para obtener el elemento id = "imagen"
  • JavaScript cambiar las propiedades de este elemento (el "smiley.gif" a "landscape.jpg")

Hot Tutorials

Contact US

JavaScript HTML DOM cambia el contenido HTML
10/30