05 Jun Crear, modificar y eliminar párrafos en una web con javascript
En este ejercicio vamos crear, modificar y eliminar nodos.
Te será de utilidad repasar las instrucciones
- createElement()
- appendChild(), insertBefore()
- removeChild()
Previamente te sugiero leer esta entrada dónde se explica la teoría.
Enunciado
A continuación se te muestra el código html de un documento web con 5 párrafos.
En el interior del script encontrarás las instrucciones:
- Que en el tercer párrafo haya un enlace con el texto «+ info» creado con javacript y que enlace a https://francescricart.com
- Inserta un párrafo de color rojo entre el tercer y el cuarto párrafos
- Elimina el segundo párrafo [1]
Obsevación: Para facilitar la comprensión del enunciado se ha escrito manualmente un número en cada párrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poner un enlace dentro de un párrafo</title>
</head>
<body>
<p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem esse dicta alias dolore odio odit iusto facilis harum tempora labore, rem doloribus dolorum consequatur modi praesentium commodi blanditiis quo cupiditate.</p>
<p>2. Adipisci, quibusdam reprehenderit odio error corporis dolore deleniti, reiciendis iure facere, ut temporibus natus voluptatem. Voluptas architecto, nisi praesentium quo, repudiandae incidunt vitae quae aut amet laboriosam ut eaque deserunt!</p>
<p>3. Deleniti sunt voluptatum, ipsa, officiis doloribus corrupti iusto! Doloribus dolor nesciunt sapiente vel, fugiat, sint ad impedit explicabo laborum earum recusandae eum! Quod, ducimus pariatur excepturi labore consequuntur corporis autem?</p>
<p>4. Vero aperiam, ipsum unde doloribus minima ab, sint nulla molestiae autem dicta ad laborum voluptas labore et officia sapiente voluptatibus perferendis voluptatem optio veritatis placeat consequatur aspernatur? Corporis, impedit, pariatur.</p>
<p>5. Distinctio quas, impedit inventore quod! Incidunt ab in, quidem deleniti repellendus odit quisquam, quis pariatur, doloribus adipisci culpa nesciunt! Vero, soluta maxime provident minus voluptates esse, distinctio culpa labore deserunt.</p>
<script>
//que en el tercer párrafo haya un enlace con el texto "+ info" creado con javacript y que enlace a https://francescricart.com
//inserta un párrafo de color rojo entre el tercer y el cuarto párrafos
//elimina el segundo párrafo [1]
</script>
</body>
</html>Solución del ejercicio
Para resolver la primera pregunta es importante que tengas en cuenta que si no añades contenido en el interior del enlace no lo verás físicamente.
Se da el caso de alumnos que lo resuelven correctamente pero que al no ver el enlace piensan que lo han hecho mal.
En relación a la segunda pregunta, fíjate que la instrucciónnodoPadre.insertBefore(nodoAnadir, antesDeQuien) es un poco especial. En el caso de este ejercicio requerimos acceder al body para que realmente se inserten los nodos.
Finalmente en la tercera y última pregunta se proponen dos expresiones equivalentes.
//que en el tercer párrafo haya un enlace con el texto "+ info" creado con javacript y que enlace a https://francescricart.com
var zParrafos = document.querySelectorAll("p") //array de nodos párrafo;
var zEnlace = document.createElement("a");
zEnlace.href="https://francescricart.com";
zEnlace.innerHTML = "+ info";
zParrafos[2].appendChild(zEnlace);
//inserta un párrafo de color rojo entre el tercer y el cuarto párrafos
var zParrafoNuevo = document.createElement("p");
zParrafoNuevo.innerHTML = "nuevo texto con javascript";
zParrafoNuevo.style.color = "red";
var zBody = document.querySelectorAll("body")[0];
zBody.insertBefore(zParrafoNuevo , zParrafos[3]);
//elimina el segundo párrafo [1]
zBody.removeChild(zParrafos[1]);
// zParrafos[1].parentNode.removeChild(zParrafos[1]);¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
¿Estás cansado de buscar como solucionar el error concreto de tu script? La consola del navegador es tu ayuda. ¡Deja de buscar!
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Práctica javascript para practicar con las informaciones de un array. Llamamos, substituimos y añadimos elementos. Incluye solución.
borja g gonzález
Posted at 01:26h, 21 eneroBuenas,
Tengo una duda, ¿Por qué pones document.querySelectorAll(«body»)[0];? porque poner el [0]?.
Un saludo
Francesc Ricart
Posted at 10:31h, 21 enerobuenos días,
fíjate que en el documento sólo puede haber una etiqueta body. querySelectorAll devuelve un array. en caso de que el querySelectorAll encuentre el nodo body estará en la posición [0] del array. por este motivo hay que ponerlo. (siempre accedemos al primer elemento del array contando a partir del 0.
saludos,
Bor
Posted at 19:01h, 21 eneroBuenas!
Muchas gracias por contestar y tan rápido, desearle lo mejor es poco.
Un saludo!
Francesc Ricart
Posted at 09:42h, 22 enero😉
un saludo!