Añadir atributo a elemento con jQuery

En este tutorial aprenderemos cómo añadir atributos a elementos html dinámicamente y obtener su valor con jQuery.

Método .prop(«nombre»,»valor»)

Veamos un ejemplo

<div id="cabecera"></div>
<script> 
  // Seleccionamos el elemento con id=cabecera y le añadimos el atributo title 
  $("#cabecera").prop("title","Cabecera de la página"); 
  // El elemento ahora quedará asi: 
  <div id="cabecera" title="Cabecera de la página"></div> 
  // Si enviamos un solo parámetro con el método prop nos devolverá el valor del atributo 
  var titulo = $("#cabecera").prop("title"); 
  // Ahora el valor de titulo es: "Cabecera de la página". 
</script>

Método .attr(«nombre»,»valor»)

El funcionamiento del método attr() es similar a prop().

<!-- Elemento html --> 
<div id="cabecera"></div>
<script> 
  // Seleccionamos el elemento con id=cabecera y le añadimos el atributo title 
  $("#cabecera").attr("title","Cabecera de la página"); 
  // El elemento ahora quedará asi: 
  <div id="cabecera" title="Cabecera de la página"></div> 
</script>

¿Cuándo usar prop o attr?

El método prop() existe en JQuery desde la versión 1.6. Antes sólo podíamos utilizar attr().

El método attr() sirve para acceder a los atributos html de un elemento y el método prop() accede a las propiedades.

En las últimas versiones de JQuery ya se está deshabilitando las funcionalidades del método attr() porque no funciona bien en todos los casos, así que te recomiendo usar prop().

Más tutoriales sobre jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo