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
      1
2345678
9101112131415
161718192021 22
23242526272829
30      

Domingo 22 de Junio 2025
Semana 25



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(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