Métodos html() y html(valor) en jQuery

Estos métodos nos permiten agregar un bloque de html a partir de un elemento de la página. Básicamente es la propiedad innerHTML del DOM. Nos retorna el bloque html contenido a partir del elemento html que hace referencia el objeto jQuery.

El método html () establece o devuelve el contenido (innerHTML) de los elementos seleccionados, cuando se utiliza este método para devolver contenido, devuelve el contenido del PRIMER elemento coincidente.
Cuando se usa este método para establecer contenido, sobrescribe el contenido de TODOS los elementos coincidentes.
Sugerencia: Para establecer o devolver solo el contenido de texto de los elementos seleccionados, use el método text ()

Sintaxis

Devolver contenido:

$(selector).html()

Establecer contenido:

$(selector).html(content)

Establecer contenido usando una función:

$(selector).html(function(index,currentcontent))

El ejemplo a continuación se cambia el contenido de todos los elementos

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("Hola <b>mundo!</b>");
  });
});
</script>
</head>
<body>
<button>Cambiar el contenido de todos los elementos p</button>
<p>Este es un parrafo.</p>
<p>Este es otro parrafo</p>
</body>
</html>

Ver ejemplo anterior

El método:

html([bloque html])

Nos permite agregar un bloque de html a partir de un elemento de la página. Básicamente es la propiedad innerHTML del DOM.

Y el método:

html()

Nos retorna el bloque html contenido a partir del elemento html que hace referencia el objeto jQuery.

Problema:Disponer dos botones, al ser presionado el primero crear un formulario en forma dinámica que solicite el nombre de usuario y su clave. Si se presiona el segundo botón mostrar todos los elementos HTML del formulario previamente creado.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <input type="button" id="boton1" value="Mostrar formulario">
  <input type="button" id="boton2" value="Mostrar elementos html del formulario"><br>
  <div id="formulario">
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

Ver ejemplo anterior

func5.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(presionBoton1);
  x = $("#boton2");
  x.click(presionBoton2);
}

function presionBoton1() {
  let x = $("#formulario");
  x.html('<form>Ingrese nombre:<input type="text" id = "nombre" >' +
    '<br>Ingrese clave:<input type="text" id="clave"><br>' +
    '<input type="submit" value="confirmar"></form>');
}

function presionBoton2() {
  let x = $("#formulario");
  alert(x.html());
}

Como podemos observar cuando se presiona el primer botón creamos un objeto jQuery que toma la referencia del div y mediante el método html crea un bloque en su interior:

function presionBoton1() {
  let x = $("#formulario");
  x.html('<form>Ingrese nombre:<input type="text" id = "nombre" >' +
    '<br>Ingrese clave:<input type="text" id="clave"><br>' +
    '<input type="submit" value="confirmar"></form>');
}

El segundo botón muestra en un alert el contenido HTML actual del div:

function presionBoton2() {
  let x = $("#formulario");
  alert(x.html());
}

Hay que diferenciar bien los métodos html(valor) y text(valor), el segundo como habíamos visto agrega texto a un elemento HTML.

Acotaciones

Cuando desarrollamos un sitio hay que tener mucho cuidado con la creación de bloques en forma dinámica ya que puede haber usuarios que no tengan activo JavaScript y les sería imposible acceder a dichas características. En nuestro ejemplo si el usuario tiene desactivo JavaScript no podrá acceder al formulario de carga de datos.

(adsbygoogle = window.adsbygoogle || []).push({});

Métodos html() y html(valor) en jQuery

Sintaxis