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

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>

Como se hace en jQuery

Veamos el resultado por la consola del navegador de la siguiente expresión:

//jQuery
console.log($("p").html())
console.log($("p").eq(0).html())
Consultar, modificar, insertar, eliminar el html de un nodo web con jQuery 1
Resultado por la consola del navegador usando jQuery

Usando a $ pero instrucciones de Javascript

Veamos el resultado por la consola del navegador de la siguiente expresión:

//híbrido entre jQ y JS
console.log($("p")[0].innerHTML)
Consultar, modificar, insertar, eliminar el html de un nodo web con jQuery 2
Resultado por la consola del navegador usando Javascript

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 $.

Como se hace en jQuery

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");

Usando a $ pero instrucciones de Javascript

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.