10 - Método html() y html(valor)

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.

pagina1.html

<!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>

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


Retornar