jQuery - Establecer contenido y atributos

Establecer contenido - text(), html() y val()

Usaremos los mismos tres métodos del capítulo anterior para establecer el contenido:

  • text() - Establece o devuelve el contenido de texto de los elementos seleccionados
  • html() - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el marcado HTML)
  • val() - Establece o devuelve el valor de los campos de formulario

El siguiente ejemplo demuestra cómo establecer el contenido mediante los métodos text(), html() y val():

Ejemplo

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("EJEMPLO"); });

Pruébalo »

Funciones de retorno (callbacks) de text(), html() y val()

Los tres métodos de jQuery anteriores: text(), html() y val(), también tienen funciones de retorno (callbacks). La función de retorno tiene dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor original (antiguo). Luego, en la función, devuelve la cadena que desees usar como nuevo valor.

El siguiente ejemplo demuestra text() y html() con funciones de retorno:

Ejemplo

$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Texto antiguo:" + origText + "Nuevo texto: Hello world! (índice:" + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "HTML antiguo:" + origText + "Nuevo HTML: Hello <b>world!</b> (índice:" + i + ")"; }); });

Pruébalo »

Establecer atributos - attr()

El método jQuery attr() también se utiliza para establecer/cambiar valores de atributos.

El siguiente ejemplo demuestra cómo cambiar (establecer) el valor del atributo href en un enlace:

Ejemplo

$("button").click(function(){ $("#ejemplo").attr("href","http://www.example.com/jquery"); });

Pruébalo »

El método attr() también le permite establecer varios atributos al mismo tiempo.

El siguiente ejemplo demuestra cómo establecer los atributos href y title al mismo tiempo:

Ejemplo

$("button").click(function(){ $("#ejemplo").attr({ "href" : "http://www.example.com/jquery", "title" : "Tutorial de jQuery" }); });

Pruébalo »

Función de retorno (callback) de attr()

El método jQuery attr() también proporciona una función de retorno (callback). La función de retorno tiene dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor original (antiguo). Luego, en la función, devuelve la cadena que desees usar como nuevo valor.

El siguiente ejemplo demuestra el método attr() con función de retorno:

Ejemplo

$("button").click(function(){ $("#ejemplo").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

Pruébalo »
Otras extensiones