Temas > Programacion > Java script - Java > Metodos html y html valor en jQuery
Julio

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.
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
<?php //esto no va
 <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>
?>//esto no va
funciones.js
<?php //esto no va
 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());
 }
?>//esto no va
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:
<?php //esto no va
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());
}
?>//esto no va
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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar