Agregar ID al elemento usando JavaScript

Para agregar o cambiar el ID de un elemento HTML, selecciónalo y asígnale un valor con element.setAttribute('id', 'profile') o element.id = 'profile'. El nuevo valor reemplaza cualquier ID que ya tuviera el elemento. Usa un ID único en el documento.

Agregar un ID a un elemento existente

Selecciona un elemento existente mediante su ID actual y, después, establece el nuevo valor. Por ejemplo, si la página contiene <h2 id="intro">Introduction</h2>, selecciona ese elemento HTML con const heading = document.getElementById('intro') y cambia su ID con heading.setAttribute('id', 'article-title'). Su propiedad .id contendrá entonces article-title; más adelante, puedes buscarlo por el nuevo ID con document.getElementById('article-title').

La siguiente demostración independiente de JavaScript usa un objeto simple para mostrar la misma asignación y el valor que imprime. No selecciona ni modifica un elemento HTML; usa el código del DOM anterior para trabajar con una página:

const element = { id: 'intro' };
element.id = 'article-title';
console.log(element.id);

article-title

setAttribute() recibe el nombre y el valor de un atributo, así que también puede establecer atributos distintos de id.

Un ID debe identificar un solo elemento del documento. Si otro elemento ya usa article-title, elige un valor diferente para que los ID sean únicos.

Agregar un ID a un elemento nuevo

Crea el elemento con document.createElement('p'), asígnale note.id = 'status-note' y, después, añádelo con document.body.append(note). Crear un nodo por sí solo no lo muestra en la página. Esto agrega el párrafo al final del cuerpo del documento; si quieres que el texto u otros atributos estén presentes cuando se incorpore al documento, establécelos antes de añadirlo.

Elegir entre setAttribute() y la propiedad id

Para asignar el ID de un elemento, element.id = 'profile' es una opción directa y concisa. La llamada element.setAttribute('id', 'profile') usa el método general para atributos y resulta útil cuando el código maneja dinámicamente los nombres de los atributos. Ambos métodos establecen el mismo ID; no hace falta usar los dos. La propiedad .id devuelve el ID actual del elemento, por lo que también permite leerlo directamente.

Agregar un ID con jQuery

Si jQuery ya está cargado en la página, selecciona el elemento y establece su ID con $('#intro').attr('id', 'article-title'). Esto cambia el ID del elemento seleccionado a article-title, igual que los ejemplos con el DOM nativo. El selector $ y el método .attr() requieren que jQuery esté incluido en la página; si no tienes esa biblioteca, usa los métodos nativos de JavaScript anteriores.