jQuery agregar atributos

Usa el método attr() de jQuery para agregar o cambiar un atributo HTML en los elementos que coincidan con un selector. Carga jQuery en la página antes de ejecutar estos ejemplos. Usa .prop() para cambiar el estado booleano actual de un control de formulario y .data() para guardar datos administrados por jQuery en vez de un atributo HTML.

Establecer un atributo HTML con .attr()

Llama a .attr(name, value) en una colección de jQuery. El nombre es el atributo HTML que quieres establecer y el valor es el que quieres asignarle. El atributo se agrega a todos los elementos coincidentes. Si el selector no encuentra ningún elemento, la llamada no tiene efecto.

La siguiente demostración ejecutable de Node.js usa una pequeña colección simulada para mostrar las llamadas y sus resultados sin un navegador. En una página web, usa las mismas llamadas de jQuery después de cargar la biblioteca; la colección simulada solo sirve para esta demostración independiente.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const elements = {
  saveButton: { attributes: {}, properties: {}, data: {} },
  reportLink: { attributes: {}, properties: {}, data: {} },
  emailUpdates: { attributes: {}, properties: { checked: false }, data: {} }
};

function $(selector) {
  const element = elements[selector.slice(1)];
  return {
    attr(name, value) {
      if (typeof name === "object") Object.assign(element.attributes, name);
      else element.attributes[name] = value;
      return this;
    },
    prop(name, value) {
      element.properties[name] = value;
      return this;
    },
    data(name, value) {
      element.data[name] = value;
      return this;
    }
  };
}

$("#saveButton").attr("title", "Save your changes");
$("#reportLink").attr({
  href: "/reports/current",
  target: "_blank",
  rel: "noopener"
});
$("#emailUpdates").prop("checked", true);
$("#saveButton").attr("data-category", "books");
$("#saveButton").data("category", "featured");

console.log(JSON.stringify({
  title: elements.saveButton.attributes.title,
  link: elements.reportLink.attributes,
  checked: elements.emailUpdates.properties.checked,
  htmlData: elements.saveButton.attributes["data-category"],
  jqueryData: elements.saveButton.data.category
}, null, 2));

{
  "title": "Save your changes",
  "link": {
    "href": "/reports/current",
    "target": "_blank",
    "rel": "noopener"
  },
  "checked": true,
  "htmlData": "books",
  "jqueryData": "featured"
}

En una página real, llama a .attr("title", "Save your changes") en la colección de jQuery seleccionada por $("#saveButton"). El nombre del atributo es title; el segundo argumento es su valor. Se agrega a todos los elementos coincidentes. Algunos atributos habituales con valores de texto son title, href, src y aria-label.

Establecer varios atributos con .attr()

Para establecer varios atributos en una sola llamada, pasa un objeto cuyas claves sean los nombres de los atributos y cuyos valores sean los valores que quieres asignar. El ejemplo anterior configura un enlace e incluye rel="noopener" al abrir una pestaña nueva. Usa esta forma de objeto cuando los atributos estén relacionados; cada valor se asigna a todos los enlaces coincidentes. Elige el destino y el texto del enlace según tu página. El valor rel resulta útil con target="_blank" porque impide que la página abierta reciba una referencia al objeto que la abrió.

Usar .prop() para el estado booleano actual

Los atributos booleanos de HTML, como checked y disabled, describen el estado inicial o predeterminado de un elemento. El estado actual puede cambiar cuando alguien interactúa con la página. Usa .prop() para cambiar o consultar la propiedad actual del DOM; establecer un atributo con .attr() no es una forma fiable de cambiar el estado marcado actual de una casilla.

El ejemplo marca la casilla emailUpdates y establece su estado actual con .prop("checked", true). Del mismo modo, usa .prop("disabled", true) para desactivar un control ahora, o pasa false para volver a activarlo. Usa .attr() cuando necesites establecer un atributo HTML, como title o href de un elemento; usa .prop() para consultar o cambiar el valor actual de propiedades booleanas como checked y disabled.

Distinguir los atributos HTML data-* de .data() de jQuery

Usa .attr("data-name", value) cuando quieras escribir el valor como un atributo HTML data-* y mantenerlo en el marcado del elemento. En el ejemplo, .attr("data-category", "books") establece ese atributo HTML.

En cambio, .data("category", "featured") guarda un valor en la caché de datos de jQuery. Es útil para el estado administrado por scripts, pero no significa que se haya escrito el atributo HTML correspondiente. Si el marcado u otro script debe leer el atributo data-* actualizado, usa .attr(); si el valor solo lo administra jQuery, usa .data(). Así puedes elegir la API según dónde deba estar disponible el valor.