Usando jquery para modificar elementos del HTML

Modificar elementos del HTML

24 de julio de 2015

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

Comentarios

Artículos