Agregar ID a un elemento HTML usando jQuery
-
Use el método
.attr()para agregar ID a un elemento HTML usando jQuery -
Use el método
.add()para agregar ID a un elemento HTML usando jQuery
En jQuery, una función explícita solo funciona para agregar una clase a un elemento HTML. Este método se utiliza como addClass("className").
Pero en el caso de añadir un id, no se define tal método. Generalmente, un id de un elemento HTML lo hace más diferente y poderoso en términos de especificidad.
Aquí, examinaremos dos formas de agregar un id a un elemento HTML. Y todo el proceso se realizará a través de convenciones jQuery.
La primera solución es usar el método .attr() y agregar el atributo id y un valor correspondiente. Esto hará que el id se establezca para un elemento.
A continuación, iremos a por un ejemplo que puede añadir un id pero no está tan definido como el anterior. Aquí, tomaremos un elemento HTML como parámetro en el método .add() y agregaremos el id.
Entonces, veamos una vista previa de la explicación con instancias.
Use el método .attr() para agregar ID a un elemento HTML usando jQuery
Tendremos una etiqueta p en nuestro elemento cuerpo del ejemplo HTML, y hay una palabra específica en la etiqueta p que deseamos resaltar. Además, será posible si hay una etiqueta relevante y dejar que tenga una id única.
Entonces, haremos una etiqueta span, crearemos una id para ella y luego agregaremos alguna propiedad CSS para ver si la id recién creada funciona.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to <span>DelftStack</span></p>
<script>
$("span").attr("id","intro");
$("#intro").css("color","darkcyan");
</script>
</body>
</html>
Producción:
Use el método .add() para agregar ID a un elemento HTML usando jQuery
En este caso, tenemos la etiqueta p pero no asignamos un span debajo de la etiqueta p. Buscaremos la instancia de la etiqueta p, agregaremos un elemento HTML a través del método .add() y lo agregaremos a la etiqueta p.
No mostrará su presencia hasta que agregue el elemento recién creado. Revisemos las líneas de código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to </p>
<script>
$("p").add("<span id='intro'>DelftStack</span>").appendTo("p");
$("#intro").css("color","royalblue");
</script>
</body>
</html>
Producción:
