Modificació del DOM

Modificar un elemento existente

Cubrimos varias maneras en las que puedes modificar los aspectos de un elemento existente:

Modificar atributos

Puedes establecer un atributo en un elemento al establecer la propiedad con el mismo nombre. Por ejemplo, para cambiar el src de una <img>:

imgEl.src = "http://www.dogs.com/dog.gif";

Adicionalmente, también puedes utilizar el método setAttribute, así:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

Si quieres quitar un atributo, debes hacerlo con removeAttribute, como para quitar el atributo disabled de un botón, habilitándolo:

imgEl.removeAttribute("disabled");

Modificar estilos

Puedes cambiar estilos igual que como cambias los atributos, al acceder a la propiedad style del elemento, y establecr la propiedad correspondiente. Por ejemplo, para cambiar el color:

headingEl.style.color = "hotpink";

Recuerda usar notación "camelCase" en los nombres de las propiedades de CSS de varias palabras, puesto que los guiones no son nombres de propiedad válidos en JS:

headingEl.style.backgroundColor = "salmon";

Modificar nombres de clases

Para agregar una clase a un elemento, puedes establecer la propiedad className:

mainEl.className = "warning";

Eso anulará las otras clases existentes, así que debes hacer esto en su lugar si solo quieres añadir a la lista de clases:

mainEl.className += " warning";

En los navegadores más recientes, puedes utilizar la funcionalidad de classList en su lugar:

mainEl.classList.add("warning");

Modificar HTML interno o texto

Para reemplazar por completo el contenido de un elemento con una cadena arbitraria de HTML, utiliza innerHTML:

mainEl.innerHTML = "los gatos son <strong>los más lindos</strong>";

Si no necesitas pasar etiquetas HTML, debes utilizar textContent en su lugar:

mainEl.textContent = "los gatos son los más lindos";

En general, debes tener cuidado al utilizar cualquiera de estas 2 propiedades, porque también eliminarán los detectores de eventos (los cuales enseñamos en la siguiente lección).

Crear elementos desde cero

Hay todo un conjunto de funciones que puedes utilizar para crear elementos completamente nuevos y agregarlos a la página.Para crear un nuevo elemento, utiliza el acertadamente llamado createElement:

var imgEl = document.createElement("img");

Para anexarlo a la página, llama appendChild en el elemento padre de destino:

document.body.appendChild(imgEl);

Del mismo modo, también puedes utilizar insertBefore, replaceChild, removeChild e insertAdjacentHTML.