0Pricing
Frontend Academy · Lección

Crear y añadir elementos

Use createElement, setAttribute, append y remove para crear y modificar dinámicamente la estructura del DOM.

Crear y añadir elementos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

createElement

document.createElement(tagName) crea un elemento nuevo en memoria; todavía no forma parte del DOM. Después puede establecer sus propiedades y añadirlo al árbol.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append y appendChild

parent.append(child) añade un nodo o una cadena al final de los elementos hijos de parent. appendChild es el equivalente antiguo, pero append es más flexible: acepta varios nodos y cadenas.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() añade al principio. element.before() inserta antes del elemento. element.after() inserta después del elemento.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) inserta HTML en una posición especificada sin reemplazar el contenido existente. Posiciones: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) crea una copia profunda de un elemento, incluidos todos sus elementos secundarios. Pase false para crear una copia superficial. Es útil para duplicar elementos de plantilla.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild y remove()

element.remove() elimina el elemento del DOM. El método anterior parent.removeChild(child) también funciona. Los elementos eliminados aún pueden estar referenciados en variables y volver a añadirse.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) reemplaza el elemento antiguo del DOM por el nuevo. Es más práctico que el patrón anterior replaceChild.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment para inserciones por lotes

Un DocumentFragment es un contenedor ligero que no existe en el DOM. Construya un subárbol dentro de él y, después, añádalo en una sola operación; esto provoca un solo reflow en lugar de N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

El elemento &lt;template&gt;

El elemento HTML <template> contiene marcado que no se muestra hasta clonarlo con JavaScript. Es mejor que construir cadenas o clonar elementos visibles.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Establecer propiedades frente a atributos

Las propiedades de los elementos (el.href, el.src, el.value) suelen ser la forma más directa y eficiente de establecer valores. Los atributos (setAttribute) son mejores para atributos personalizados o ARIA que no tienen una propiedad DOM correspondiente.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Evitar innerHTML con contenido del usuario

Al crear elementos a partir de datos proporcionados por el usuario, utilice siempre métodos del DOM (createElement, textContent, setAttribute) en lugar de construir una cadena HTML y usar innerHTML. Nunca interpole datos del usuario en cadenas HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Comprobación rápida

Necesita añadir 100 elementos de lista a un <ul> sin provocar 100 reflows. ¿Qué método es el más adecuado?

Repaso: creación de elementos del DOM

createElement crea elementos en memoria. append/prepend/before/after los insertan en el árbol. remove() elimina un elemento. DocumentFragment agrupa inserciones para mejorar el rendimiento. El elemento