Hola de nuevo, es este pequeño tutorial aprenderemos cómo obtener y asignar valores a un determinado elemento, tal como un campo numérico, un campo de texto, un elemento div etc.

En jQuery contamos con diferentes métodos que nos permiten hacer esta tarea de manera sencilla. por ejemplo .val() o .html()

Método .val()

Una manera sencilla de entender como funcionan estos métodos es entender que se comportan de dos formas distintas dependiendo de si pasamos argumentos o no. Por ejemplo llamar el método .val() tal cual sin ningún parámetro nos devolverá el valor del atributo value del elemento sobre el que aplicamos dicho método. Sin embargo si pasamos un argumento .val(3); se asignará el valor que pasamos como argumento al atributo value del elemento. Veamos esto con un ejemplo:

<!-- suponiendo que tenemos el siguente campo numérico-->
<input type="number" id="edad" value="0"/>

Lo primero que haremos será obtener el valor e imprimirlo en consola:

// En nuestro código js
// Observar que no paso ningún argumento
var edad = $("#edad").val();
// hasta este momento la variable edad vale 0
console.log("Edad: " + edad);

obtendremos lo siguiente:

Edad: 0

Ahora lo que haremos será modificar el valor de nuestro campo de edad a través del mismo método .val()

// establecemos el valor de la variable edad en 17
var edad = 17;
// lo asignamos al campo de edad
$("#edad").val(edad);
// Ahora el valor del elemento es 17
console.log($("#edad").val());
// esto último arroja 17 como resultado

Como puedes ver en este último fragmento de código lo que hacemos el pasarle como parámetro al método .val(edad) la variable edad y este se encarga de cambiar el valor del atributo correspondiente.

Pero… ¿Puedo usar .val() en cualquier elemento?.

Método .html()

No todos los elementos soportan el uso del método .val() únicamente los elementos que tiene el atributo value como un input, option, radio etc.

Para asignar un valor o texto a un elemento que no soporta el atributo value, podemos utilizar el método .html() el cual se comporta de igual forma dependiendo de si pasamos un argumento o no. En caso de si pasar un argumento este sustituirá el contenido que se encuentra entre las etiquetas del elemento sobre el que aplicamos dicho método. Por ejemplo:

<!--si tenemos el siguiente html-->
<div id="contenido">Contenido inicial</div>

Lo que tenemos es una etiqueta div con un id=“contenido” y un texto inicial; vamos a modificar ese contenido:

var nuevoContenido = "Este contenido sustituye al contenido anterior";
// ahora asignamos el valor de nuevoContenido al div.
$("#contenido").html(nuevoContenido);

De igual forma podemos pasar un contenido html en formato de cadena de texto, y este se interpretará como html. veamos un ejemplo:

var nuevoHtml = "<ul><li>elemento nuevo 1</li><li>elemento nuevo 2</li></ul>"
$("#contenido").html(nuevoHtml);

Puedes ver un ejemplo funcionando Aquí.

Por último no está de más mencionar que al igual que el método .val() sin argumentos, .html() nos devolverá el contenido del elemento. Por ejemplo

//obtenemos el html del div "contenido"
var contenido = $("#contenido").html();
console.log(contenido);

Obtendremos algo como esto:

<h1>Contenido inicial</h1>

Saludos, espero que esto te sea útil. 🙂