Agregar ID al elemento usando JavaScript
-
Use la función
setAttribute()para agregarida un elemento en JavaScript -
Agregue
idal elemento preexistente usando JavaScript -
Agregue
idal nuevo elemento usando JavaScript
El atributo id juega un papel vital en JavaScript, que se relaciona con un determinado elemento adecuado con la función getElementById(). El id debe ser único en la página HTML porque ayudan a obtener los valores y el contenido del elemento HTML más adelante.
Con la importancia del atributo id, este tutorial enseña cómo agregar el atributo id a un elemento HTML preexistente o nuevo usando JavaScript.
Use la función setAttribute() para agregar id a un elemento en JavaScript
Para elementos HTML preexistentes y nuevos, se utiliza la función setAttribute() y la propiedad .id. El setAttribute() toma dos parámetros.
El primero es el nombre del atributo y el segundo es el valor del atributo. Por ejemplo, el primer parámetro sería id, y el segundo puede ser cualquier cadena para agregar el atributo id a ese elemento en particular.
Por otro lado, podemos asignar directamente el valor del atributo id a la propiedad .id. Usaremos el siguiente código de inicio HTML para agregar una id a un elemento nuevo y preexistente.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Add IDs</title>
</head>
<body>
<h1 id="First Heading">My First Heading</h1>
<p id="firstParagraph">My first paragraph.</p>
</body>
</html>
Agregue id al elemento preexistente usando JavaScript
var firstP = document.getElementById('firstParagraph');
firstP.setAttribute('id', 'firstPracPara');
console.log(document.getElementById('firstPracPara').id);
firstP.id = 'newPracPara';
console.log(document.getElementById('newPracPara').id);
Producción :
"firstPracPara"
"newPracPara"
Usamos dos formas en el código anterior para agregar el atributo id. El primero es el método setAttribute() y el segundo es la propiedad .id.
En primer lugar, obtenemos el elemento cuyo valor de id es firstParagraph, usamos la función setAttribute() para establecer un nuevo valor del atributo id e imprimimos en la consola para confirmar que se ha cambiado.
Ahora, el id se cambia de firstParagraph a firstPracPara. Cambiémoslo nuevamente usando la propiedad .id.
El último valor de id es newPracPara; lo imprimí también en la consola para confirmar. Puede ver la salida anterior.
Agregue id al nuevo elemento usando JavaScript
var secondP = document.createElement('p');
secondP.setAttribute('id', 'secondPara');
console.log(secondP.id);
secondP.id = 'newPara';
console.log(secondP.id);
Producción :
"secondPara"
"newPara"
Aquí, estamos creando un nuevo elemento primero usando la función createElement() y luego usamos el método setAttribute() y la propiedad .id para agregar id.
