JavaScript Modificar el documento
Aprende a modificar el DOM con JavaScript: crear, insertar, reemplazar y eliminar nodos, usar insertAdjacentHTML, textContent vs innerHTML y agrupar actualizaciones con DocumentFragment.
JavaScript te permite modificar una página después de que se ha cargado: agregar nuevos elementos, moverlos, actualizar texto, cambiar atributos y eliminar lo que el usuario ya no necesita. Esta es la base de toda interfaz dinámica — desde mostrar un mensaje de validación hasta renderizar una lista completa de resultados de búsqueda.
Esta página cubre el conjunto de herramientas prácticas para modificar el DOM: crear e insertar nodos, la diferencia entre textContent e innerHTML, inserción rápida de HTML con insertAdjacentHTML, eliminar y reemplazar nodos, y usar un DocumentFragment para mantener las actualizaciones eficientes. Para encontrar los elementos que deseas modificar, consulta Búsqueda: getElement* y querySelector*. Para una visión más amplia de cómo la página está estructurada como un árbol de nodos, consulta Comprendiendo los nodos del DOM.
Crear nuevos nodos
Antes de poder insertar algo en la página, debes crearlo. Hay dos bloques de construcción: nodos de elemento (<div>, <li>, …) y nodos de texto (texto plano).
Crear elementos
Los nuevos elementos se crean con el método document.createElement(tag). El elemento existe solo en memoria hasta que lo insertes en el documento — hasta entonces el usuario no ve nada. Así es como se crea un div y se añade a la página:
<body></body>
<script>
let div = document.createElement('div');
div.innerHTML = "Hello, world!";
document.body.appendChild(div);
</script>El elemento solo aparece cuando appendChild (u otro método de inserción) lo conecta a un nodo que ya está en el documento.
Crear nodos de texto
Para agregar texto plano, usa document.createTextNode(text). A diferencia de innerHTML, un nodo de texto trata su contenido de forma literal — <b> permanece como los caracteres <b> en lugar de convertirse en una etiqueta de negrita. Esto hace que los nodos de texto sean la opción segura cuando el texto proviene de un usuario o de cualquier fuente no confiable:
<body>
<div id="container"></div>
</body>
<script>
const div = document.getElementById("container");
let textNode = document.createTextNode('Here is some text');
div.appendChild(textNode);
</script>Insertar nodos
Una vez que un nodo existe, necesitas colocarlo en algún lugar. El método clásico es parent.appendChild(node), que añade el nodo como último hijo. Los navegadores modernos también ofrecen una familia de métodos más flexible que acepta tanto nodos como cadenas de texto:
| Método | Dónde inserta |
|---|---|
node.append(...) | Al final, dentro de node |
node.prepend(...) | Al inicio, dentro de node |
node.before(...) | Justo antes de node |
node.after(...) | Justo después de node |
node.replaceWith(...) | Reemplaza node por completo |
Aquí append y prepend añaden elementos de lista en extremos opuestos de un <ul>:
<body>
<ul id="list">
<li>middle</li>
</ul>
</body>
<script>
const list = document.getElementById("list");
const first = document.createElement("li");
first.textContent = "first";
list.prepend(first);
const last = document.createElement("li");
last.textContent = "last";
list.append(last);
</script>insertAdjacentHTML
Cuando deseas insertar una cadena de HTML en relación a un elemento — sin alterar el contenido existente — element.insertAdjacentHTML(position, html) es la herramienta adecuada. El argumento position es una de cuatro palabras clave:
"beforebegin"— antes del elemento en sí"afterbegin"— dentro, antes del primer hijo"beforeend"— dentro, después del último hijo"afterend"— después del elemento en sí
<body>
<div id="box">existing content</div>
</body>
<script>
const box = document.getElementById("box");
box.insertAdjacentHTML("beforeend", "<p>added inside, at the end</p>");
box.insertAdjacentHTML("afterend", "<p>added after the box</p>");
</script>Dado que insertAdjacentHTML analiza una cadena HTML, nunca pases entradas no confiables — se aplica el mismo riesgo de XSS que con innerHTML. Existen métodos hermanos insertAdjacentText e insertAdjacentElement para insertar texto plano o un nodo existente en las mismas posiciones.
textContent vs innerHTML
Ambas propiedades establecen el contenido de un elemento, pero se comportan de manera muy diferente:
innerHTMLanaliza la cadena como HTML.el.innerHTML = "<b>Hi</b>"produce un nodo en negrita. Asignarle un valor reemplaza todos los hijos existentes.textContenttrata la cadena como texto plano.el.textContent = "<b>Hi</b>"muestra los caracteres literales<b>Hi</b>.
Prefiere textContent siempre que estés insertando texto — es más rápido e inmune a la inyección de HTML/scripts. Recurre a innerHTML solo cuando realmente necesites marcado y la fuente sea de confianza.
<body>
<div id="asHtml"></div>
<div id="asText"></div>
</body>
<script>
const input = "<b>3 < 5</b>";
document.getElementById("asHtml").innerHTML = input; // renders bold text
document.getElementById("asText").textContent = input; // shows the literal markup
</script>Modificar elementos
Cambiar atributos
Para cambiar un atributo de un elemento, puedes usar element.setAttribute(name, value). Este método te permite establecer el valor de un atributo en el elemento especificado.
<body>
<div id="firstID"></div>
<div>new id is: <span id="result"></span></div>
</body>
<script>
const div = document.getElementById("firstID");
const result = document.getElementById("result");
div.setAttribute("id", "newDiv");
result.innerHTML = div.id;
</script>Para un análisis más profundo de la distinción entre atributos HTML y propiedades DOM (y cuándo usar setAttribute frente al acceso directo a propiedades como el.id = "..."), consulta Atributos y propiedades.
Manipulaciones avanzadas
Clonar elementos
Puedes crear una copia de un elemento usando el método element.cloneNode(deep). Establecer deep en true clona el elemento y sus descendientes.
<body>
<div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
const div = document.getElementById("mydiv");
const clone = div.cloneNode(true);
document.body.appendChild(clone);
</script>Reemplazar elementos
Para intercambiar un nodo por otro, llama a element.replaceWith(newNode). El nodo antiguo sale del documento y el nuevo toma su lugar:
<body>
<p id="old">I will be replaced.</p>
</body>
<script>
const old = document.getElementById("old");
const fresh = document.createElement("p");
fresh.textContent = "I am the replacement.";
old.replaceWith(fresh);
</script>Eliminar elementos
Para eliminar un elemento del DOM, puedes usar element.remove().
<body>
<div>It's the only thing you see, as the next div is removed!</div>
<div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
const div = document.getElementById("mydiv");
div.remove();
</script>Agrupar actualizaciones con un DocumentFragment
Cada vez que insertas un nodo en el documento activo, el navegador puede recalcular el diseño. Insertar muchos nodos en un bucle, uno a la vez, puede ser lento. Un DocumentFragment es un contenedor ligero fuera de pantalla: ensamblas todos tus nodos dentro de él y luego insertas el fragmento una sola vez. Solo sus hijos terminan en el DOM — el fragmento en sí desaparece.
<body>
<ul id="list"></ul>
</body>
<script>
const list = document.getElementById("list");
const fragment = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
const li = document.createElement("li");
li.textContent = "Item " + i;
fragment.appendChild(li);
}
// One single insertion into the live document
list.appendChild(fragment);
</script>Para más formas de mantener eficientes las actualizaciones del DOM, consulta Optimización del rendimiento del DOM. Si tu marcado es reutilizable, el elemento <template> es otra forma rápida de clonar estructura predefinida.
Ejemplo práctico: Crear una lista de tareas
Apliquemos estos conceptos para crear una lista de tareas sencilla con JavaScript:
<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);
// Adding items to the list
function addItem(text) {
let item = document.createElement('li');
item.textContent = text;
list.appendChild(item);
}
addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>Conclusión
Modificar el documento es el núcleo de toda interfaz dinámica: crea nodos con createElement/createTextNode, colócalos con append/prepend/before/after o insertAdjacentHTML, elige textContent para texto seguro e innerHTML solo para marcado de confianza, y usa un DocumentFragment para mantener rápidas las actualizaciones masivas. Usa replaceWith y remove para intercambiar o eliminar nodos.
Para profundizar más, explora Manipulación del DOM para una visión general más amplia, Recorrer el DOM para moverse entre nodos relacionados, y Propiedades de nodo: tipo, etiqueta y contenido para comprender qué contiene cada nodo.