Actualizar el innerHTML con jQuery

En la publicación de hoy, aprenderemos cómo actualizar o reemplazar el HTML interno de un elemento en jQuery.

Actualice innerHTML usando jQuery

jQuery proporciona el método .html() para establecer el contenido HTML de cada elemento en el conjunto de elementos coincidentes.

Sintaxis:

.html(htmlString).html(function)

1. La htmlString es una cadena HTML configurada como el contenido de cada elemento coincidente.
2. Esta es una function que devuelve el contenido HTML al conjunto. El valor HTML antiguo y el índice del elemento en el conjunto se consideran argumentos.

Antes de llamar a la función, jQuery vacía el elemento. Luego usa el argumento HTML antiguo para consultar el contenido antiguo. this puede referirse al elemento actual dentro del conjunto dentro de la función.

Cuando se usa .html() para establecer el contenido de un elemento, cualquier contenido en ese elemento se reemplaza por completo con el nuevo contenido. Además, jQuery elimina otras construcciones como controladores de eventos y datos de elementos secundarios antes de reemplazar esos elementos con contenido nuevo.

En este método se utiliza la propiedad innerHTML del navegador.

Es posible que algunos navegadores no generen un DOM que replique exactamente la fuente HTML proporcionada. Utilice el método .text() para establecer el contenido de un elemento script que no contiene HTML, en lugar del método .html().

Entendámoslo con el siguiente ejemplo.

Código HTML:

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

Código JavaScript:

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

En el ejemplo anterior, hemos definido el elemento div, que imprime el mensaje Hello World! Welcome to the DelftStack. mensaje. Al hacer clic en el botón Change the text, se actualizará el DOM con la nueva etiqueta de párrafo.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Va a mostrar el siguiente resultado.

Salida antes de cambiar el texto:

Salida después de cambiar el texto:

Ejecutar demostración