Metodos html y html valor en jQuery

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

Julio(Admin)

Fecha de registro: 2011-01-21 21:33:50
Total temas creados: 446
Total mensajes enviados: 21

Fecha del Tema: 2013-04-16 22:37:27

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.

Si quieres dejar un comentario registrate o inicia sesión pulsando aquí

¿Has olviado tu contraseña?
¿Todavia no te has registrado?
Pulsa aquí para registrate

Visitas: 1179367
Usuarios en linea:

Google

Calendario

Lun	Mar	Mie	Jue	Vie	Sab	Dom
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Martes 28 de Septiembre 2021
Semana 39

Enlaces de interes

Todos los viernes a las 23:30 hs

Java script - Java

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

..............................................................................................................................................................................................................................................

Foro creado y diseñado para compartir conocimientos
Derechos reservados. Autor: Julio Tortosa (Contacto)..