jQuery / Manipulando el arbol de DOM

Bienvenidos sean a este post, hoy veremos como manejar elementos del arbol (tree).

Si vienen de posts anteriores hasta ahora hemos visto como modificar atributos y propiedades mediannte attr y prop respectivamente, pero no hemos visto como modificar la estructura de un arbol, pero para poder hacer esto deberemos utilizar una funcion que estuvimos usando siempre hasta ahora, $().

Hasta ahora hemos visto que la funcion $() nos permite buscar un elemento por medio de su identificacion o por otros medios y aplicar otras funciones a esta, obtener valores y otros temas, pero no hace esto solamente sino que nos permite crear elementos del codigo HTML pero para ello debemos ver un ejemplo, para este caso usaremos el codigo que vimos en este post, en caso de no tenerlo les dejo un link para descargarlo:

Simplemente extraigan todos los archivos en un solo directorio, con esto realizado pasemos a trabajar con el archivo codigo.js, en este archivo agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	$('<a href="#top">Ir al inicio</a>').insertAfter('div.capitulo p');
	$('<a id="top"></a>').prependTo('body');
});

En este caso usaremos a la funcion $() donde le pasaremos un mensaje con link para ir al inicio de la pagina, observen que es un codigo simple de HTML y en el href le indicamos a cual link debe desplazarse, pero despues utilizamos a la funcion insertAfter y como parametro le indicamos que debe usar cada div identificado con la clase capitulo y dentro de estos al final de cada parrafo, la siguiente linea crea otro link pero vacio y es el que identificaremos como top, pero a traves de prependTo lo ingresaremos al comienzo del tag que indiquemos, con esto comentado podemos ver como funciona nuestra pagina mediante el siguiente video

Como pueden ver el resultado final ha sido muy practico porque nos permitio agregar al final de cada parrafo la posibilidad de ir al inicio al final de cada uno de ellos, del codigo anterior vimos dos funciones para realizar lo visto en el video, hablemos un poco sobre estas y algunas mas que usaremos a continuacion:

• insertBefore(), agrega contenido por fuera del tag y antes de elementos existentes
• prependTo(), agrega contenido dentro del tag pero antes del contenido en este
• appendTo(), agrega contenido dentro del tag pero despues del contenido en este
• insertAfter(), agrega contenido por fuera del tag y despues de elementos existentes

Con esto comentado podemos pasar a la siguiente accion que podemos realizar como es la capacidad de mover elementos, para ello debemos volver al archivo libro.html y modificaremos todo el div denominado contenedor de la siguiente manera:

<div id="contenedor">
	<h1 id="titulo">La sombra sobre Innsmouth</h1>
	<div id="autor">por H.P. Lovecraft</div>
	<h2>Capitulo 1</h2>
	<div class="capitulo">
	<p class="nuevo">Los campesinos de los alrededores y las gentes de los pueblos vecinos lo comentaron mucho, pero se mostraron extremadamente reservados con la gente de fuera. Llevaban casi un siglo hablando entre ellos de la moribunda y medio desierta ciudad de Innsmouth y lo que acababa de suceder no había sido más tremendo ni espantoso que lo que se comentaba en voz baja desde mucho años antes. Habían sucedido cosas que les enseñaron a ser reservados, de modo que era inútil intentar sonsacarles. Además, sabían poca cosa en realidad, porqué la presencia de unos saladares extensos y despoblados dificultaba mucho la llegada a Innsmouth por tierra firme, y los habitantes de los pueblos vecinos se mantenían alejados.</p>
	<p>Durante el invierno de 1927-28, los agentes del Gobierno Federal realizaron una extraña y secreta investigación sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>
	<p>En cambio, a los más perspicaces les sorprendió el extraordinario número de detenciones, el desacostumbrado despliegue de fuerza pública que se empleó para llevarlas a cabo, y el silencio que impusieron las autoridades en torno a los detenidos. No hubo juicio, ni se llegó a saber tampoco de qué se les acusaba; ni siquiera fue visto posteriormente ninguno de los detenidos en las cárceles ordinarias del país. Se hicieron declaraciones imprecisas acerca de enfermedades y campos de concentración, y más tarde se habló de evasiones en varias prisiones navales y militares, pero nada positivo se reveló. La misma ciudad de <a href="https://es.wikipedia.org/wiki/Innsmouth">Innsmouth</a> se había quedado casi despoblada. Sólo ahora empiezan a manifestarse en ella algunas señales de lento renacer.</p>
	<p>Las quejas formuladas por numerosas organizaciones liberales fueron acalladas tras largas deliberaciones secretas; los representantes de dichas sociedades efectuaron algunos viajes a ciertos campos y prisiones, y como consecuencia, tales organizaciones perdieron repentinamente todo interés por la cuestión. Más difíciles de disuadir fueron los periodistas; pero finalmente, acabaron por colaborar con el Gobierno. Sélo un periódico -un diario sensacionalista y de escaso prestigio por esta razón- hizo referencia a cierto submarino capaz de grandes inmersiones que torpedeó los abismos de la mar, justo detrás del <a href="https://hplovecraft.fandom.com/es/wiki/Arrecife_del_Diablo">Arrecife del Diablo</a>. Esta información, recogida casualmente en una taberna marinera, parecía un tanto fantástica ya que el arrecife, negro y plano, queda por lo menos a milla y media del puerto de Innsmouth.</p>
	</div>	
	<div id="footer">
	<p>Desde aqui puedes leer el <a href="https://web.seducoahuila.gob.mx/biblioweb/upload/Lovecraft,%20H.P.%20-%20La%20Sombra%20Sobre%20Innsmouth.pdf">relato completo</a></p>
	</div>
</div>

En este caso, solo para uso practico y de ejemplo, agregamos un parrafo al comienzo del capitulo pero que en realidad va al final, el resto sigue siendo exactamente igual a como estaba antes, ahora necesitamos reacomodar este parrafo a donde corresponde, para ello debemos volver al archivo codigo.js y tomar el bloque anterior y modificarlo de la siguiente manera:

$(document).ready(function() {
	$('div.capitulo p').eq(0).appendTo('div.capitulo');
	$('<a href="#top">Ir al inicio</a>').insertAfter('div.capitulo p');
	$('<a id="top"></a>').prependTo('body');
});

Solo agregamos una linea nueva donde le decimos que seleccione el primer parrafo de capitulo, esto gracias al eq, despues usamos a appendTo para moverlo al final de capitulo, y las otras dos lineas hacen exactamente lo mismo que antes, con esto comentado veamos nuestra pagina como quedo actualmente

Observen que no solamente se movio al fondo sino que se agrego la opcion de ir al inicio como en los casos anteriores, ya vimos como crear elementos, como moverlos y ahora veremos como envolverlos, para ello seguiremos con el archivo codigo.js y modificaremos el bloque anterior de la siguiente manera:

$(document).ready(function() {
	$('div.capitulo p').eq(0)
		.appendTo('div.capitulo')
		.wrap('<blockquote></blockquote>');
	$('<a href="#top">Ir al inicio</a>').insertAfter('div.capitulo p');
	$('<a id="top"></a>').prependTo('body');
});

Como pueden ver solo hicimos una modificacion, esta fue tomar la linea encargada de mover el parrafo del ejemplo anterior y le agregamos la funcion wrap para que le agregue a este parrafo el tag blockquote, si recargan a la pagina se vera de la siguiente manera

Pero esto no es la unica opcion que disponemos, tambien podemos usar wrapAll pero para verlo en accion vamos a crear un nuevo archivo llamado test.html y le agregaremos este codigo:

test.html

<html>
<head>
	<title>Pagina de Test</title>
	<script src="https://code.jquery.com/jquery-3.6.4.min.js" 
	integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
	<div class="texto">
		Este es un texto de prueba para el documento.
	</div>
	<span class="linea">Prueba 1</span>
	<span class="linea">Prueba 2</span>
	<span class="linea">Prueba 3</span>
<script>
	$(document).ready(function() {
		$('span.linea')
			.wrapAll('<ol id="notes"></ol>')
			.wrap('<li></li>');
	});
</script>
</body>
</html>

Hablemos primero del codigo HTML antes de ver el codigo de nuestro script, en este caso primero cargaremos la libreria de jQuery, como hacemos habitualmente, y despues en la pagina en si tendrremos unu div con un texto seguido de tres span llamadas linea con un texto en cada uno de ellos, ahora pasemos a nuestro script en si, aqui usaremos a ready como siempre, dentro de este bloque seleccionaremos todos los elementos de tipo span con la clase linea, y en estos primero aplicaremos la funcion wrapAll para que envuelva a todos ellos con el tag ol y despues la funcion wrap donde a cada uno de ellos le asignaremos el tag li, con esto comentado veamos como quedo la pagina

Y si inspeccionamos la pagina, no nos referimos ver al codigo fuente, por ejemplo desde Google Chrome veremos lo siguiente

Como pueden ver ahora cada linea tiene aplicado todo lo que le pasamos con las funciones del codigo, con esto hemos cubierto una parte de modificaciones mas avanzadas con jQuery, aqui les dejo todos los codigos finales que trabajamos hoy:

En resumen, hoy hemos visto otras acciones mas que podemos realizar sobre nuestro codigo, primero vimos como insertar nuevos elementos, despues vimos como mover elementos, y finalmente como envolver con tags parte de nuestro codigo espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50