Consultar, modificar, insertar, eliminar el html de un nodo web con jQuery

Una vez se ha aprendido e interiorizado Javascript, el salto a jQuery es directo. De todos modos es útil no perder de vista javascript de vista cuando se aprende jQuery.

En esta entrada se compara el como se interactúa con el contenido html de los nodos de un documento web sin perder de vista a JS.

Consultar html de un elemento web

Para consultar el html de un nodo web se hace de modo muy similar a Javascript.

Dado el siguiente html:

<p class="parrafo-1">soy el párrafo 1</p>
<p class="parrafo-2">soy el párrafo 2</p>
<p class="parrafo-3">soy el párrafo 3</p>
<p class="parrafo-4">soy el párrafo 4</p>
<p class="parrafo-5">soy el párrafo 5</p>
<p class="parrafo-6">soy el párrafo 6</p>

[vc_custom_heading text=»Como se hace en jQuery» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]Veamos el resultado por la consola del navegador de la siguiente expresión:

//jQuery
console.log($("p").html())
console.log($("p").eq(0).html())

[vc_custom_heading text=»Usando a $ pero instrucciones de Javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]Veamos el resultado por la consola del navegador de la siguiente expresión:

//híbrido entre jQ y JS
console.log($("p")[0].innerHTML)

Una de las particularidades html() es que cuando se usa para devolver el contenido html atrapado dentro de un nodo únicamente devuelve el contenido del primer nodo. En el caso de nuestro ejemplo, el párrafo 1.

Modificar, insertar, eliminar html

Una vez somos capaces de acceder al contenido de un nodo modificar su contenido se resuelve de modo fácil.

Imaginemos que queremos modificar el contenido de todos los párrafos de un documento web. Comparemos como se hace en jQuery y como se hace usando instrucciones de Javascript pero usando la función $.[vc_custom_heading text=»Como se hace en jQuery» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]Se usa la instrucción $('selector CSS').html('contenido html a escribir')
Veamos la solución al ejemplo planteado:

//jQuery()
$("p").html("todos con el mismo contenido");

[vc_custom_heading text=»Usando a $ pero instrucciones de Javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]En este caso usamos la instrucción innerHTML pero recordemos que esta no está preparada para interactuar con arrays.

Debemos ir nodo a nodo.

for (var i = 0; i < $("p").length; i++) {
	$("p")[i].innerHTML = "todos con el mismo contenido"
}

En los 2 casos el resultado final es el mismo. Todos los párrafos del documento contienen el texto todos con el mismo contenido.¡Hola!

Querido lector,

Existen también las instrucciones

.innerText() 
.text()

que te invito a usar junto con las explicadas en esta entrada.

La diferencia es que text() ignora las etiquetas html que puedan formar parte del contenido de un elemento (nodo) mientras que html() las conserva.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!