Modificar elementos del HTML

24 de julio de 2015
jquery remove append html

Los métodos del DOM son aquellos que permiten manipular los elementos del HTML, añadir o quitar etiquetas, cambiarlas de sitio o duplicarlas, leer atributos, crearlos o cambiarles su valor. Estas son algunas tareas que podemos hacer con los métodos del DOM de jQuery de una manera más simple de como lo haríamos con javascript.

En esta sección vamos a construir una lista interactiva de cosas por hacer, que agregará items a una lista de verificación y los eliminará a medida que van siendo marcados.

Primero: Cear el documento HTML

<!DOCTYPE html>
<html>
    <head>
    	<title>Cosas por hacer</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>Cosas por hacer</h2>
		<form name="checkListForm" id="checkListForm">
			<input type="text" name="itemDeLista"/>
		</form>
		<div id="boton">¡Agregar!</div>
		<br/>
		<div class="lista"></div>
	</body>
</html>

				 

Notarás que hemos creado un formulario de HTML para obtener los datos de parte del usuario. Debemos almacenar los datos del usuario en una variable, la que nos permitirá agregar esos datos al cuerpo del documento HTML más adelante.

El archivo script.js

$(document).ready(function() {
    $('#boton').click(function(){
        var Agregar = $('input[name=itemDeLista]').val();
        $('.lista').append('
' + Agregar + '
'); $('#checkListForm')[0].reset(); }); $(document).on('click', '.item', function() { $(this).remove(); }); });

Lo primero que hicimos fué establecer una variable igual al contenido del campo de entrada con .val(). Luego podremos usarla en nuestro div con la clase .lista. Con .append() podremos ir agregando el texto al final. Por último, como queremos poder eliminar items de nuestra lista usamos el controlador de eventos .on() que junto a la función .remove() la usamos para quitar los elementos

Este es el primero de una serie de artículos sobre jquery que quiero publicar, espero les haya gustado y les sea de utilidad. También pueden colaborar enviando sus comentarios o compartiendo en las redes sociales.



Cosas por hacer **demo**

¡Agregar!





Anuncios / Ads


Comentarios

Nombre
Email
Comentario

Artículos

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Constanza Gonzalez: Mini Poesía
• Constanza Gonzalez: Ensayo - Sobre las Desiciones
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Michelles Jaque
• Beatriz Cabrera Zapata
• Lista comercios asociados al CyberMonday 2015
• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos desde localhost o sitio web con PHPMailer smtp
• Cuadro de busqueda instantanea en sitio web jquery-php
• Sistema de LogIn con verificacion de email y recuperacion de contraseña usando PHP
• Usar PDO para conectarse a MYSQL
• Proyecto Intranet: Ordenes de servicio y ventas
• Cómo detectar el navegador con JavaScript
• Demostración Jquery UI Selectable usando php y bases de datos mysql


Anuncios / Ads