10 - Métodos 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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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>
</body>
</html>

funciones.js

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

function presionBoton1()
{
  var x;
  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()
{
  var x;
  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()
{
  var x;
  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()
{
  var x;
  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