Búsqueda personalizada
 
 
 
 
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.

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.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion