Cómo agregar ID al elemento usando JavaScript

En JavaScript, el "identificación"El atributo es significativo porque identifica un elemento específico que se puede encontrar utilizando el"getElementById ()" método. La ID en la página HTML debe ser única porque se usa más tarde para acceder a los valores del elemento HTML y al contenido relacionado.

Esta publicación describirá el procedimiento para agregar una identificación a un elemento en JavaScript.

Cómo agregar ID al elemento usando JavaScript?

Para agregar la identificación a un elemento, el "setAttribute ()Se utiliza el método ". Requiere dos parámetros, el "nombre"Del atributo es el primer parámetro, como"identificación"Y su valor es un segundo parámetro, como"a B C".

Sintaxis

La ID de sintaxis dada utilizada para el método setattribute ():

elemento.setAttribute ("id", "valor")

Hay dos formas de agregar una identificación a un elemento en JavaScript:

• Agregue ID creando un nuevo elemento usando JavaScript
• Agregue ID al elemento HTML existente en JavaScript

Los ejemplos dados demostrarán en ambos sentidos uno por uno!

Ejemplo 1: Agregar ID creando un nuevo elemento en JavaScript usando el método setattribute ()

En este ejemplo, crearemos un encabezado HTML de JavaScript y estableceremos su ID y el inntexto para el elemento DOM.

En el archivo JavaScript, cree un elemento HTML "H3" utilizando el "createElement ()" método:

constemento const = documento.createElement ('H3');

Establezca la identificación única en el encabezado usando el "setAttribute ()" método:

elemento.setAttribute ("id", "encabezado");

Aquí, el método toma dos argumentos:

• El "identificación"Es el primer argumento que es el nombre del atributo.
• El "título"¿Es el valor de la identificación como segundo atributo?.

Obtenga la referencia de la etiqueta del cuerpo HTML usando el "QuerySelector ()" método:

VAR BODY = Documento.QuerySelector ('cuerpo');

Agregue el encabezado "H3"Para el cuerpo, usando el"añadir Niño()"Método pasando el elemento como argumento:

cuerpo.appendChild (elemento);

Ahora, establezca el texto para el elemento que se mostrará en el DOM usando el "getElementsBytagName ()" con el "innerhtml" propiedad:

documento.getElementsBytagName ("H3") [0].innerhtml = "Bienvenido a Linuxhint!";

Producción

La salida significa que el encabezado se crea con éxito con su ID que se establece utilizando el "setAttribute ()" método.

Ejemplo 2: Agregar ID al elemento existente usando el método setattribute ()

Intentemos agregar una nueva ID al elemento HTML existente en JavaScript.

En un archivo HTML, cree un encabezado con

etiqueta y asigna una identificación usando el "identificación" atributo:

Bienvenido a Linuxhint!H3>

La salida HTML correspondiente será:

Ahora, en el archivo JavaScript, primero, obtenga la referencia del elemento utilizando su ID asignada con la ayuda del "getElementById ()"Método y guárdelo en una variable"Pon la identificacion":

var setid = documento.getElementById ("encabezado");

Establezca la nueva identificación "encabezado1"Al elemento usando el"setAttribute ()" método:

Pon la identificacion.setAttribute ("id", "Heading1");

Producción

La salida anterior indica que la ID del encabezado del elemento HTML ahora es "encabezado1"Que está establecido por el JavaScript"setAttribute ()" método.

Conclusión

Para agregar una ID a un elemento, use el JavaScript "setAttribute ()" método. Hay dos formas de agregar una ID a un elemento en JavaScript, agregue una ID creando un nuevo elemento o agregue una ID al elemento HTML existente en JavaScript. Esta publicación describió el procedimiento para agregar una identificación a un elemento en JavaScript.