introducción a dom jquery

32
Introducción a DOM: HTML y jQuery Ver para creer Hasta el momento construimos páginas web usando HTML y les dimos estilo usando CSS. Nuestras páginas quedan geniales, pero en realidad nohacen nada; no podemos arrastrar elementos por la página, abrir o cerrar paneles deslizantes, animar los elementos de HTML, ni agregar elementos nuevos a nuestras páginas de HTML simplemente haciendo un clic sobre un botón. Pero todo eso está a punto de cambiar. En esta serie de ejercicios vas a aprender jQuery, que te va a permitir hacer todas esas cosas y muchas más. Instrucciones Andá a la ventana de Resultados. Pasá el cursor por encima de cada uno de los <div> para ver qué hacen y hacé clic sobre cada uno. Después hacé clic en "Guardar y enviar" cuando estés listo para aprender jQuery! *.html <!DOCTYPE html> <html> <head> <title>¡Magia!</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="rojo"></div> <div id="azul"></div> <div id="amarillo"></div> <div id="verde"></div> </body> </html> *.css div { height:100px; width:100px; display: inline-block;

Upload: hartel

Post on 27-Jan-2016

12 views

Category:

Documents


2 download

DESCRIPTION

Excelente guía paso a paso.

TRANSCRIPT

Page 1: Introducción a DOM Jquery

Introducción a DOM: HTML y jQuery

Ver para creerHasta el momento construimos páginas web usando HTML y les dimos estilo usando

CSS. Nuestras páginas quedan geniales, pero en realidad nohacen nada; no

podemos arrastrar elementos por la página, abrir o cerrar paneles deslizantes, animar

los elementos de HTML, ni agregar elementos nuevos a nuestras páginas de HTML

simplemente haciendo un clic sobre un botón.

Pero todo eso está a punto de cambiar. En esta serie de ejercicios vas a

aprender jQuery, que te va a permitir hacer todas esas cosas y muchas más.

Instrucciones

Andá a la ventana de Resultados. Pasá el cursor por encima de cada uno de

los <div> para ver qué hacen y hacé clic sobre cada uno. Después hacé clic en

"Guardar y enviar" cuando estés listo para aprender jQuery!

*.html

<!DOCTYPE html>

<html>

<head>

<title>¡Magia!</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css"/>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="rojo"></div>

<div id="azul"></div>

<div id="amarillo"></div>

<div id="verde"></div>

</body>

</html>

*.css

div {

height:100px;

width:100px;

display: inline-block;

}

#rojo {

background-color:#FF0000;

Page 2: Introducción a DOM Jquery

}

#azul {

background-color:#0000FF;

}

#amarillo {

background-color:#E2BE22;

}

#verde {

background-color:#008800;

}

*.js

$(document).ready(function() {

$('div').mouseenter(function() {

$(this).animate({

height: '+=10px'

});

});

$('div').mouseleave(function() {

$(this).animate({

height: '-=10px'

});

});

$('div').click(function() {

$(this).toggle(1000);

});

});

Introducción a DOM: HTML y jQuery

El Modelo de Objetos del DocumentoPara aprovechar jQuery al máximo tenemos que repasar cómo se compone una

página HTML.

Un documento de HTML está estructurado de acuerdo con elDocument Object

Model, es decir, el Modelo de Objetos del Documento, oDOM. jQuery puede acceder

y modificar el HTML interactuando con el DOM.

Page 3: Introducción a DOM Jquery

El DOM está compuesto de todos los elementos en la página, dispuestos en una

jerarquía que refleja la forma en que el documento HTML está ordenado. ¿Te acordás

de queimaginábamos que el documento de HTML era como una casa? Podés

imaginarte que el DOM es algo parecido. Igual que en un documento de HTML, los

elementos en el DOM pueden tener elementos padres, hijos y hermanos.

Si no tenés muy claro qué es un elemento de HTML, qué es un selector de CSS, o

qué son los ID y las clases, podés repasarlos en la serie de ejercicios de HTML y

CSS.

Instrucciones

Revisá el código en script.js. Pronto vamos a explicarlo, pero por ahora todo lo que

tenés que saber es que este código seleccionará un elemento de HTML y lo hará

desaparecer cuando el documento de HTML se cargue.

En este ejercicio queremos centrarnos en el elemento div, así que en la línea 2 dentro

de $() agregá div.

Page 4: Introducción a DOM Jquery

Cambiar de objetivosNo te sientas intimidado por la cantidad de código que estás viendo: vamos a

analizarlo parte por parte, para asegurarnos de que lo entiendas todo.

Así como div en CSS se refiere al elemento <div> de HTML, el 'div' en jQuery se

refiere al mismo elemento<div> de HTML. Podés imaginarte que el nombre del

elemento se muestra en jQuery igual que como estaba en CSS, solo que ahora

aparece entre comillas. Así que, por ejemplo, podés centrarte en cualquier elemento

de la clasebutton usando

$('.button').algunaAcción

Como te acordarás, .button es la forma que usás en CSS para centrarte en cualquier

elemento que en tu archivo de HTML tengaclass="button".

Instrucciones

Escribí un selector dentro de $() para que se centre en el ID #verde.

Page 5: Introducción a DOM Jquery
Page 6: Introducción a DOM Jquery

¿Qué es jQuery?jQuery es una biblioteca, o un conjunto de complementos útiles (adds-ons), para el

lenguaje de programación JavaScript. Tal vez parezca contradictorio aprender cómo

usar una biblioteca antes de aprender el lenguaje en sí, pero hay algunas buenas

razones para hacerlo.

1. Lleva un poco de tiempo sentirse cómodo con JavaScript y es más fácil manipular los elementos de DOM directamente con jQuery que con JavaScript. Vamos a empezar mostrándote jQuery para ayudarte a crear sitios web geniales mucho más rápido.

2. jQuery brinda una interfaz sencilla para el código JavaScript subyacente. Es más fácil para muchos usuarios aprender primero a manejar jQuery y después sí animarse con los detalles de JavaScript.

3. jQuery es mucho mejor en cuanto a resultados inmediatos y visuales que el JavaScript normal. Cuando termine esta lección vas a haber creado tu propio botón interactivo.

Instrucciones

En la pestaña script.js, agregá las piezas faltantes de la línea 2, de modo que tu

código jQuery llame a fadeOuten el div con el ID #nolisto.

Page 7: Introducción a DOM Jquery
Page 8: Introducción a DOM Jquery

Introducción a DOM: HTML y jQuery

Cómo enlazar tus archivos HTML y JavaScript¡Genial! Ahora necesitamos asociar la página de HTML con el script de jQuery, de

modo que la magia de jQuery modifique nuestro HTML.

Así como necesitamos una etiqueta<link> para conectar nuestros HTML y CSS,

necesitamos una etiqueta<script> para conectar nuestro HTML y jQuery. La etiqueta

se ve así:

<script type="text/javascript" src="src"></script>

Fijate que la etiqueta <script> no se autocierra; necesita una etiqueta</script> de

cierre.

Instrucciones

Agregá una etiqueta <script> aindex.html. En type debe decir "text/javascript" y

en src debe decir "script.js".

Primeros pasosA continuación vamos a iniciar nuestra magia con jQuery usando la sintaxis$

(document).ready(); que ya viste. Funciona de esta manera:

$() dice: "¡Miren, están a punto de pasar cosas que tienen que ver con jQuery!"

Si ponemos document entre paréntesis sabemos que vamos a hacer magia en el

mismo documento HTML.

.ready(); es una función, o una acción básica, en jQuery. Dice: "¡Voy a hacer algo

apenas esté listo el documento HTML!"

Lo que está entre los paréntesis de.ready() es el evento de jQuery, que ocurre en

cuanto el documento HTML está listo.

Entonces,

$(document).ready(algo);

dice: "¡cuando el documento HTML esté listo, hacé algo!" (En el siguiente ejercicio te

vamos a mostrar cómo reemplazar algo con una acción).

Page 9: Introducción a DOM Jquery

Fijate que .ready(); termina con un punto y coma. Esto le indica a jQuery que

terminaste de darle una orden.

Instrucciones

Agregá $(document).ready(); ascript.js. Acordate: la parte de document es

especial: no es un elemento de HTML como <p> o<div>, así que no va entre comillas.

El enfoque funcional¡Perfecto! Ahora necesitamos agregar algo dentro de nuestra funciónready().

Acordate de que cuando hablamos de "función", podés pensar en "acción." Las

funciones son la unidad básica con la que se trabaja en jQuery.

Por eso, jQuery incluye la palabra clave function. La sintaxis se ve así:

function(){ magia de jQuery;}

Si agregamos nuestra función dentro de nuestro .ready(), jQuery ejecutará el código

de nuestra función en cuanto se cargue el documento HTML. La sintaxis se verá de

esta manera:

$(document).ready(function() { magia de jQuery;});

Acordate de que cerramos nuestras sentencias de jQuery con un punto y coma.

Instrucciones

Agregá function(){} dentro de.ready(). Todavía no tenés que escribir nada entre

las llaves ({}) defunction; eso lo vamos a ver en el siguiente ejercicio.

Deslizamiento electr(ón)ico¡Ya casi terminamos! Ahora solamente tenemos que incluir una acción en el cuerpo

de nuestra función. En este caso vamos a hacer un encabezadodiv deslizable para

que se haga visible en nuestra página HTML.

Entre las {} de nuestra function(), vamos a convertir nuestro div en un objeto de

jQuery, para que jQuery pueda manipularlo. De forma muy parecida a como

usamos .ready() en$(document), vamos a usar la acción.slideDown() en nuestro

objeto divde jQuery.

Page 10: Introducción a DOM Jquery

Dentro de los paréntesis de.slideDown, vamos a indicarle la rapidez con la que debe

deslizarse. Vamos a escribir 'slow' (es decir, despacio). No te olvides de poner las

comillas.

Instrucciones

En la línea 2 de la pestaña script.js, convertí 'div' en un objeto de jQuery, y llamá

a la acción.slideDown() sobre dicho objeto. Entre los paréntesis de slideDown(),

escribí 'slow' (despacio) de modo que jQuery sepa a qué velocidad querés que se

deslice div.

Page 11: Introducción a DOM Jquery

Repaso de mitad de lección¡Buen trabajo! Ya vimos bastantes cosas. Tomémonos un segundo para repasar lo

que aprendimos:

Qué es jQuery y cómo puede manipular los elementos de HTML

La sintaxis de jQuery

Instrucciones

Hacé clic en "Guardar y enviar" cuando estés listo para poner en práctica tus nuevas

habilidades de jQuery y crear un botón interactivo para tu sitio web.

¡Listos!¡Muy bien! Vamos a empezar.

Instrucciones

1. En la pestaña index.html, agregá una etiqueta <script> para conectar tu HTML con script.js.

2. En tu pestaña script.js, convertídocument en un objeto de jQuery y llamá a .ready().

En el Consejo hay unos ejemplos.

¡Adentro...!¡Genial! Ahora vamos a incluir nuestra palabra clave function junto con dos nuevas

acciones, mouseenter() yfadeTo().

Page 12: Introducción a DOM Jquery

mouseenter() produce un cambio cuando movés el cursor dentro de un elemento de

HTML determinado. Por ejemplo,

$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); });});

debería hacer que todos los <div> de la página se oculten en cuanto muevas el cursor

sobre uno de ellos. (En la próxima lección vamos a ver cómo afectar solamente

un <div> entre muchos.) Por ahora solamente tenemos un <div>, así que este código

está bien.

Vamos a ubicar fadeTo() dentro demouseenter(), en lugar de hide().fadeTo() toma

dos argumentos, oentradas, separados por una coma, entre sus paréntesis: la

velocidad a la cual se desvanece el elemento y laopacidad (o transparencia) que

tendrá al desvanecerse. Por ejemplo,

fadeTo('fast', 0.25);

hará que el elemento se desvanezca rápidamente hasta un 25% de su opacidad

original, dejándolo de color muy claro.

Instrucciones

Usando los ejemplos anteriores, hacé que tu 'div' se desvanezca a 1(100%) de

opacidad cuando el cursor pase sobre él. Hacé que la velocidad de la animación

sea 'fast' (rápido). (Asegurate de escribir los argumentos de fadeTo() en orden; es

decir, velocidad y después opacidad.)

Page 13: Introducción a DOM Jquery

¡...y afuera!¡Excelente! Tu botón se ve genial: resalta cuando el usuario mueve el cursor sobre él.

Sin embargo, vas a ver que el botón queda opaco aún después de alejar el cursor de

él. Lo que queremos es que nuestro botón se vuelva claro de nuevo cuando alejamos

el cursor.

Seguro que ya adivinaste que jQuery también incluye la acciónmouseleave(). Si lo

hiciste, ¡estás en lo cierto! (Si sos curioso, podés aprender más acerca de estas

acciones en losdocumentos de jQuery.)

Instrucciones

Page 14: Introducción a DOM Jquery

Entre }); al final de tu mouseenter() y}); al final de tu $(document).ready(), agregá

un mouseleave() que usefadeTo para devolver la opacidad de tu div a 0.5. Igual que

en el fadeToanterior, su primer argumento debe ser 'fast'.

Hacé clic en Guardar y enviar, después pasá el cursor despacio sobre tu div y mirá el

efecto.

Funciones y selectores de jQuery$p vs. $('p')Probablemente te diste cuenta de que en el ejercicio anterior usamos $ y$():

var $p = $('p');

Existe una pequeña diferencia entre los dos.

$p es simplemente un nombre de variable. No hay nada de mágico en el$ de $p; es

solamente una convención para decir: "Mirá, esta variable contiene un objeto de

jQuery". Podemos llamar a $p de cualquier

manera: $parrafo, parrafo,vacas_espaciales, ¡de cualquier forma! Simplemente es

una ayuda para las personas que leen nuestro código que vean $p, ya que es una

forma concreta de decir "Mirá, acá hay un objeto de jQuery 'p'".

Pero por otra parte, $() sí es mágico. Esta es la función disfrazada que crea objetos

de jQuery. ¡Si estás creando un objeto de jQuery, tenés que usarlo!

Instrucciones

Creá una variable $div, y asignala al objeto de jQuery div usando =. No necesitás

usar $(document).ready() ni ningún otro código adicional.

Page 15: Introducción a DOM Jquery

Uso de funciones para seleccionar elementos HTMLAhora que sabés más sobre la manera en que operan las funciones, entendés cuando

decimos algo así:

$(document).ready(function() { $('div').hide(); });

Le estamos pasando a .ready() una función (que no toma argumentos; por eso es

que sus () están vacíos), y el trabajo de esa función es ocultar, con.hide(), el

objeto div de jQuery.

Instrucciones

Dale a .ready() una function(){}como argumento. Dentro de las {} de tu función,

llamá a fadeIn('slow')para que modifique a 'div', que en este momento está

invisible, de modo que pueda aparecer. Así es; ¡los objetos también pueden aparecer!

Page 16: Introducción a DOM Jquery

Selección mediante clasesNo tenemos que limitarnos a seleccionar elementos HTML como<p> y <div>;

básicamente podemos escribir entre comillas cualquier selector de CSS y ponerlo

dentro de $(). ¡Esto quiere decir que también podemos seleccionar clases!

Acordate de que en CSS seleccionamos las clases usando un punto (.). Si

tenemos class="rojo"en nuestro HTML, podemos modificarlo en CSS usando .rojo.

En jQuery, todo lo que necesitamos es escribir '.rojo' entre comillas, y podemos

ponerlo dentro de $() para crear un objeto de jQuery.

Page 17: Introducción a DOM Jquery

Instrucciones

Vamos a practicar un poco con la acción .click().

Completá el código de jQuery, de modo que los cuatro 'div' de la

clase'.desvanecer' se desvanezcan usandofadeOut() y 'slow', cuando hagas clic

( .click() ) en el botón (button ).

Selección mediante ID

Page 18: Introducción a DOM Jquery

Si podemos seleccionar elementos por su clase, también podemos seleccionarlos por

ID. Esto lo hacemos escribiendo el nombre de ID (entre comillas) dentro de $(). Así

como necesitamos el . para las clases, también necesitamos usar # para los ID.

Podemos modificar aid="encabezado" así:

$('#encabezado');

El punto y coma al final es importante: es la manera en que jQuery sabe que le

estamos dando una orden. Por ahora, una buena regla práctica es que escribas punto

y coma al final de cualquier línea que no termine con una { abierta. (El editor tratará

de ayudarte con la ubicación de los punto y coma, así que prestá atención a los

mensajes de advertencia.) En Te trabaste? Te damos un consejo podés ver los

ejemplos del uso correcto e incorrecto del punto y coma.

Instrucciones

Actualizá tu código de jQuery de modo que usando .fadeOut(), solamente se

desvanezca el div que tiene el ID #azul.

Page 19: Introducción a DOM Jquery

Selecciones flexiblesTodo lo que puedas modificar con CSS, podrás modificarlo con jQuery. Por ejemplo

podemos aplicar fadeTo() a un selector p de esta manera:

$('p').fadeTo('slow', 0);

Podemos aplicar fadeTo() a un selector li de esta manera:

$('li').fadeTo('slow', 0);

Podemos aplicar fadeTo() tanto al selector p como al selector li, de esta manera:

$('p, li').fadeTo('slow', 0);

Esto se denomina selector compuesto.

Instrucciones

Usemos un selector compuesto para aplicar fadeTo() tanto al selector.rosa como

al .rojo.

Page 20: Introducción a DOM Jquery

¡'this' es importante!En la última lección, teníamos un código que se veía así:

Page 21: Introducción a DOM Jquery

$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); }); });

La segunda línea está bien: nos dice que cuando pasamos el cursor sobre un div,

debe ejecutarse una acción determinada. Sin embargo,$('div').hide(); no

solamente ocultará el div sobre el que pasás el cursor; también

ocultará todos losdiv de la página. ¿Cómo podemos indicarle a jQuery que solamente

queremos afectar este div en particular?

¡Con this, por supuesto!

La palabra clave this (este) se refiere al objeto de jQuery con el que estamos

trabajando en ese momento. Las reglas de operación son un poco complejas, pero lo

importante es entender que si usás un controlador de eventos (eventos es el

nombre elegante de las acciones como.click() y .mouseenter(), ya que controlan

eventos de jQuery) en un elemento, podés llamar al evento que ocurre (tal

como fadeOut()) en$(this), y el evento solamenteafectará al elemento con el que

hacés algo en ese momento (por ejemplo, sobre el que se hace clic o se pasa el

cursor).

Instrucciones

Revisá el código en script.js. En lugar de usar fadeOut() en todos los'div',

solamente lo usamos en uno con ayuda de this. Acá this se refiere al div sobre el

que pasás el cursor. Hacé clic en Guardar y enviar y después sobre cada uno de los

div para verlos funcionar.

Page 22: Introducción a DOM Jquery

¿Listo?

Page 23: Introducción a DOM Jquery

¡Muy bien! Es hora de usar nuestros conocimientos recién adquiridos de jQuery para

agregar otro componente interactivo a nuestro sitio web: un panel deslizante que se

mueva hacia arriba y hacia abajo cuando hacemos clic sobre él.

Ya escribimos el HTML y CSS que necesitás. Tu misión: animarlo con jQuery.

Instrucciones

¡Ya sabés cómo se hace! Convertídocument en un objeto de jQuery y llamá

a .ready() a la acción. (Todavía no hace falta que escribas nada entre los paréntesis

de .ready().)

body {

margin:0 auto;

padding:0;

width:200px;

text-align:center;

}

Page 24: Introducción a DOM Jquery

a:hover{

-webkit-box-shadow: 0 0 8px #FFD700;

-moz-box-shadow: 0 0 8px #FFD700;

box-shadow: 0 0 8px #FFD700;

cursor:pointer;

}

.panel {

background: #ffffbd;

background-size:90% 90%;

height:300px;

display:none;

font-family:garamond,times-new-roman,serif;

}

.panel p{

text-align:center;

}

.desliza {

margin:0;

padding:0;

border-top:solid 2px #cc0000;

}

.tirar {

display:block;

position:relative;

right:-25px;

width:150px;

height:20px;

font-family:arial,sans-serif;

font-size:14px;

Page 25: Introducción a DOM Jquery

color:#ffffff;

background:#cc0000;

text-decoration:none;

-moz-border-bottom-left-radius:5px;

-moz-border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

.tirar p {

text-align:center;

}

Hacé clic y tirá¡Qué bien! Ahora queremos activar un evento cuando se hace clic sobre la pestaña

"Deslizar hacia arriba/abajo" (la clase de esa pestaña es tirar).

Instrucciones

1. Agregá tu function(){} dentro de los paréntesis de .ready().

2. function no tendrá argumentos en medio de (); pero en medio de {}, deberá llamar al controlador de eventos .click() para modificar el objeto .tirar de jQuery.

Page 26: Introducción a DOM Jquery

Cómo deslizar nuestro panel¡Perfecto! Solo un paso más: necesitamos decirle a .click() qué tiene que hacer. En

este caso, cuando hagamos clic sobre la pestaña, queremos que nuestro panel

deslizable (que tiene la clase .panel) se abra o se cierre.

El evento de jQuery que necesitamos para deslizar nuestro panel es (adivinaste):

¡.slideToggle()! Le daremos un argumento, que es la velocidad de la animación de

deslizamiento.

Instrucciones

Dentro de los paréntesis de .click(), creá un objeto de jQuery .panel, y llamá al

efecto .slideToggle(). Dale a la velocidad de la animación el argumento 'slow'.

Page 27: Introducción a DOM Jquery
Page 28: Introducción a DOM Jquery

¡Bien hecho!¡Buen trabajo! ¿Ves lo fácil que es? Con un poco de magia de jQuery, podés hacer

que tus sitios web hagan toda clase de cosas asombrosas.

Tanto Twitter, Facebook, como Gmail usan jQuery para hacer que sus sitios web sean

interactivos. ¡Aprendiendo jQuery te encaminás hacia la grandeza de Internet!

Si en algún momento tenés dudas sobre lo que es capaz de hacer jQuery, o sobre

cómo funciona, podés revisar la documentación de jQuery (http://docs.jquery.com/),

que cubre todos los aspectos de la biblioteca.

Instrucciones

¡Cuando estés listo hacé clic en Guardar y enviar para completar esta lección y

continuar con más maravillas de jQuery!

Modificar elementos de HTMLCrear elementos de HTMLLa adición dinámica de elementos a nuestra página de HTML es una herramienta

poderosa: nos permite no solamente modificar el formato, sino la estructura misma de

nuestros sitios web como respuesta a las interacciones de los usuarios. Por ejemplo,

cuando usas Gchat, cada mensaje es un nuevo <div> que se agrega de forma

dinámica a la página. Genial, ¿no?

Si lo pensás, es más o menos lo que ya hicimos: establecer una variable que sea

igual a un objeto de jQuery. Sin embargo, en este caso, en lugar de tener

simplemente algo como:

$p = $('p');

Lo que queremos hacer es pasar un elemento completo de HTML entre comillas:

$p = $("<p>¡Soy un párrafo nuevo!</p>");

Page 29: Introducción a DOM Jquery

Cuando escribimos un texto así entre comillas, lo llamamos string (es decir, una

"cadena de caracteres"). De ahora en adelante, cada vez que digamos "string" o

"cadena" podés pensar en un "texto" o "frase." Las cadenas siempre van en medio de

comillas inglesas o simples.

Instrucciones

En script.js, crea una variable, $h1, y hacé que sea igual a un objeto de jQuery que

contenga una etiqueta<h1> con el texto "Hola". La etiqueta debe ser una cadena.

Insertar elementosPodemos insertar nuestros elementos recién creados usando algunas acciones de

jQuery.

.append() insertá el elemento especificado como el último hijo del elemento al que

apunta. .prepend()inserta el elemento especificado como el primer hijo del elemento

al que apunta. Si tenemos un div con clase.info,

$('.info').append('<p>¡Algo!</p>'); $('.info').prepend('<p>¡Algo!</p>');

agregamos un párrafo con el texto "¡Algo!" dentro de todos los divs con

clase .info. .append() hará que el párrafo sea el último hijo de cada

div;.prepend() hará que el párrafo sea el primer hijo de cada div. (Nota: mirá el

consejo si estás usando comillas simples).

Page 30: Introducción a DOM Jquery

.appendTo() hace lo mismo que .append(), pero invierte el orden de "lo que hay que

agregar" y "donde agregarlo". El código

$('<p>¡Algo!</p>').appendTo('.info');

tiene el mismo efecto que el código.append() anterior. .prependTo() tiene una

relación parecida con .prepend().

Instrucciones

En la pestaña script.js, usa.append() para agregar un párrafo abody en tu

documento de HTML. Tu párrafo debe tener el texto: "¡Soy un párrafo!"