Latest web development tutorials

modificación HTML DOM

Modificar HTML = elementos de cambio, atributos, estilos y eventos.


Editar elementos HTML

Modificar HTML DOM significa muchos aspectos diferentes:

  • Cambiar el contenido HTML
  • Estilos cambio CSS
  • Cambiar los atributos HTML
  • Crear un nuevo elemento HTML
  • Quitar los elementos HTML existentes
  • Cambio de eventos (handler)

En las siguientes secciones, vamos a estudiar en profundidad el DOM HTML para modificar el método convencional.


Crear contenido HTML

La forma más fácil de cambiar el contenido del elemento es el uso de la propiedad innerHTML.

El ejemplo siguiente cambia el contenido de un elemento HTML <p>:

Ejemplos

<html>
<body>

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

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

</body>
</html>

Trate »

lámpara Vamos a explicar a usted los detalles del ejemplo en las siguientes secciones.


Cambiar los estilos HTML

A través del DOM HTML, puede acceder a los elementos HTML estilo de objeto.

En el siguiente ejemplo para cambiar un estilo de párrafo HTML:

Ejemplos

<html>

<body>

<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>


Trate »


Crear un nuevo elemento HTML

Para añadir un nuevo elemento a la DOM HTML, primero debe crear el elemento (un nodo elemento), y luego añadirlo a los elementos existentes.

Ejemplos

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);
</script>

Trate »