jQuery html(): Obtener o asignar código html en el DOM

Con la función jQuery html() podemos obtener código html de un nodo del DOM o asignárselo.

De esta manera podremos manipular de una manera fácil los diferentes elementos que hay en una página web.

Se complementa perfectamente con las funciones get() y post(). Otras funciones similares son

Sintaxis de jQuery html()

Vamos a repasar las sintaxis de esta función de jQuery extraída de la web oficial:

$(selector).html()
$(selector).html(contenido)

1 2	$(selector).html() $(selector).html(contenido)

Os explico las 2 maneras que hay de referenciarla:

En la primera llamada obtendríamos el contenido HTML del primer nodo que coincida con el selector.
En la segunda asignaríamos un determinado contenido a todos los nodos que coincidan con el selector.

Tal y como hemos visto, esta función es capaz de asignar contenido u obtener el contenido de un determinado nodo del DOM.

Ejemplo de jQuery html() para obtener el contenido de un nodo del DOM

Vamos con este primer ejemplo para ver cómo podemos obtener el valor de un nodo del DOM:

<!-- libreria jquery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
	$(document).ready(function(){
		$("#boton01").click(function(){
		    alert($("p").html());
		});
	});
</script>

$(document).ready(function(){

$("#boton01").click(function(){

alert($("p").html());

});

</script>

Os explico el ejemplo:

Primero llamamos a la librería de jQuery.
Después detectamos el click del botón que tiene id=boton01.
Y a continuación sacamos por un alert el código HTML que contiene el primer párrafo de la web.

Ejemplo de jQuery html() para asignar código HTML a un nodo del DOM

Segundo ejemplo para ver el caso inverso, esta vez asignaremos código HTML a un nodo:

<!-- libreria jquery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
	$(document).ready(function(){
		$("#boton01").click(function(){
		    $("p").html("<strong>Hola!!!!</strong>");
		});
	});
</script>