No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Escribiendo HTML desde JavaScript

12/29
Recursos

Aportes 97

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Yo agregu茅 un **replaceWith **y me sali贸 鈥渃onsidero que similar鈥, no s茅 si vaya a explotar mi compu, pero se los comparto:

const img = document.createElement('img');
img.setAttribute('src', 'https://i.pinimg.com/originals/8b/02/40/8b02409f975c98c89e15bc089e3bd289.gif');
console.log(img);

pid.replaceWith(img);

Escribir HTML desde Javascript

1. innerHTML

Inserta codigo HTML en tu HTML

//Sintaxi:
elemento.innerHTML = 'Nuevo texto';

2. innerText

Inserta Texto plano en tu HTML

//Sintaxi:
elemento.innerText = 'Nuevo texto';

3. getAttribute()

Lee el valor de un atributo que tiene un elemento cuando indicamos su propiedad en parentesis

//Sintaxi:
elemento.getAttribute('class');

4. setAttribute()

Cambia el valor de un atributo que tiene un elemento cuando le indicamos su nuevo valor en parentesis

//Sintaxi:
elemento.setAttribute('class', 'nuevo-valor');

5. classList.add()

Para agregar un valor a una clase existente en un elemento

//Sintaxi:
elemento.classList.add('nuevo-valor1');

6. classList.remove()

Para eliminar el valor descrito en parentesis a la clase de un elemento

//Sintaxi:
elemento.classList.remove('nueva-valor1');

7. classList.toggle(鈥榯itulo鈥)

Si tiene un valor descrito entre parentesis se lo quita, o si no lo tiene se lo coloca:

//Sintaxi:
elemento.classList.add('valor');

8. classList.contains(鈥榯itulo鈥)

Devuelve true o false Si una propiedad tiene un valor descrito entre parentesis

//Sintaxi:
elemento.classList.contains('valor');

9. .value = 鈥榲alor鈥

Colocarle un valor a un elemento, usualmente colocado en inputs

//Sintaxi:
elemento.value = '12345';

10. .createElement()

Crea un elemento HTML ( < img >, < section >, < header >, < div >, etc )

//Sintaxi:
document.createElement(img);

11. .append()

Puede agregar al documento uno o varios elementos creado previamente al agregarlo entre parentesis

//Sintaxi:
elemento.append(img, img2);

12. .appendChild()

Puede agregar al documento solo un elemento creado previamente al agregarlo entre parentesis

//Sintaxi:
elemento.append(img);

Aqui les dejo mis notas y mis practicas de los ejercicios propuestos en clase:

隆Qu茅 clase tan bacanaaaaaaaa! 馃殌

Imagen que usa el profesor en el ejemplo:

https://static.platzi.com/static/images/conf/[email protected]

Con el ejercicio que Juan David propuso al final de la clase, luego de darle mil vueltas pens茅 en crear un string vac铆o para borrar el texto y luego insertar la imagen, pero en mi mente pens茅 que ser铆a trampa y me rend铆. Cuando segu铆 con el video vi que as铆 era la soluci贸n. Me miro y lloro en el espejo y me siento est煤pido, il贸gico jajajajja馃槀馃槀馃槀 pero bueno, al menos ya se que as铆 era

El curso va excelente. Abruma la cantidad de cosas que se deben saber; y es muy importante entender programaci贸n orientada a objetos. Creo que es necesario una introducci贸n corta al significado del DOM para saber de donde salen tantos m茅todos y atributos de nuestras etiquetas en html.

comparto el c贸digo que us茅 para reemplazar una etiqueta <p> y poner la imagen.

const picture = document.createElement('img');
picture.setAttribute('src', 'https://i.pinimg.com/564x/bf/bd/a5/bfbda55942f57c1b6e68614249cc1727.jpg')
console.log(picture);
// parraf es la etiqueta <p> que se est谩 reemplazando
parraf.replaceChildren(picture);
picture.setAttribute('width', '200px');
picture.setAttribute('height', '300px');

La interfaz Document representa cualquier p谩gina web cargada en el navegador y sirve como punto de entrada al contenido de la p谩gina web, que es el 谩rbol DOM. El 谩rbol DOM incluye elementos como <body> y <table>, entre muchos otros. Proporciona funcionalidad globalmente al documento, como obtener la URL de la p谩gina y crear nuevos elementos en el documento.

Existen varios m茅todos de Document que servir谩n para acceder a los elementos del DOM:

  1. querySelector: Es un m茅todo de Document que regresa el primer elemento dentro del documento que coincide con el selector o grupo de selectores especificado. Si no se encuentran coincidencias, regresa null.
  2. getElementsByClassName: regresa un objeto similar a una matriz con todos los elementos secundarios que tienen todos los nombres de clase dados.
  3. getElementById: Devuelve una referencia al elemento por su id.
  4. document.createElement: crea el elemento HTML especificado por la etiqueta, o un HTMLUnknownElement si no se reconoce la etiqueta.

Y algunos m茅todos de la interfaz Element:

  1. elemento.innerHTML: La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento. Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva. (Permite modificar el contenido html del elemento, lo que puede ser peligroso, porque literalmente, se est谩 modificando el HTML)
  2. elemento.innerText: representa el contenido de texto renderizado de un nodo y sus descendientes. Como getter, se aproxima al texto que el usuario obtendr铆a si resaltara el contenido del elemento con el cursor y luego lo copiara en el portapapeles. Como setter, esto reemplazar谩 a los hijos del elemento con el valor dado, convirtiendo cualquier salto de l铆nea en elementos <br>.
  3. elemento.getAttribute: devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como 鈥溾
  4. elemento.setAttribute: Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es a帽adido con el nombre y valor indicado.
  5. elemento.rreplaceChldren: eemplaza los elementos secundarios existentes de un nodo con un nuevo conjunto espec铆fico de elementos secundarios. Estos pueden ser objetos de cadena o de nodo.
  6. elemento.append: inserta un conjunto de objetos de nodo u objetos de cadena despu茅s del 煤ltimo elemento secundario del elemento. Los objetos de cadena se insertan como nodos de texto equivalentes.

Son los m茅todos de las interfaces mencionadas hasta el momento. Dale coraz贸n para que este aporte suba y les ayude a m谩s personas.

Lo mejor de este curso, en mi opini贸n, es que el profesor es muy ocurrente鈥 puedes estar horas estudiando porque re铆r de sus comentarios te relaja un poco. Yo, por ejemplo, tuve que pausar el video cuando dice: 鈥淣o debo hacer propaganda porque no nos han pagado鈥 (Piensa un segundo) pantalla = Platzi-LG JAJAJAJJA mor铆.

Platzilg fue lo mejor de esta clase

Existen muchos atributos o propiedades, las cuales nos ayudan bastante y algunas ya se mencionaron, pero para modificar o leer ese atributo o propiedad tenemos a:

  • getAttribute

El cual nos ayuda a leer los atributos que tenga nuestro elemento (en este caso nuestro elemento es una etiqueta de p谩rrafo <p>).
.

  • setAttribute

Esto nos permite modificar el atributo, en este caso nuestro atributo es una clase.
.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic JavaScript | Practice Excercise</title>
</head>
<body>
	<p class="text">Este es el parrafo lleno de texto</p>	

	<script src="./js/script.js"></script>
</body>
</html>

.

// Esto es JavaScript
const parrafo = document.querySelector('.text');

// getAttribute
parrafo.getAttribute('class');

// setAttribute
parrafo.setAttribute('class', 'id');

Entonces esta es la forma para poder modificar los atributos de nuestros elementos en HTML

Cuando hablamos de Clases en espec铆fico, existe un objeto, que funciona espec铆ficamente con las clases, y ese objeto es:

  • .classList

Este classList es un objeto que contiene una serie de m茅todos o funciones, los cuales nos van a ayudar a trabajar de manera m谩s sencilla.
.
Ejemplo 1:
Vamos a agregar una clase a un elemento de HTML

const elemento = document.querySelector('p');

elemento.classList.add('container');

.
Ejemplo 2:
Vamos a eliminar una la clase que acabamos de crear en el elemento de HTML <p>

const elemento = document.querySelector('p');

elemento.classList.remove('container');

Les comparto un error qeue me estaba sacando canas鈥

me aparecia el error con el pid.append(img);
y era que en la linea 4 de mi c贸digo se declar贸 const pid, para el elementById鈥 como lo hizo el profe en clase鈥 Le cambie el nombre y por fin me funcion贸

Realice una peque帽a card con solo las etiquetas en blanco y rellenado el contenido con JS.

var img = document.querySelector('img');
var h1 = document.querySelector('h1')
var ptitulo = document.querySelector('.title');
var plenguajes = document.querySelector('.lenguajes');
var altimage = "foto-perfil"
var nombre = 'Pedro Blanco'
var titulo = 'Front-End Developer'
var lenguajes = 'Skills : HTML5,CSS3,JS,PHP'
var urlimagen = "https://i.ibb.co/sm4HRX0/1647007350855.jpg";

img.setAttribute('src', urlimagen);
img.setAttribute('alt', altimage);

h1.innerText = nombre;

ptitulo.innerText = titulo;
plenguajes.innerText = lenguajes;
  • A modo sugerencia, cuando manipulamos los atributos de una etiqueta HTML con setAttribute() podremos hacerlo sobre etiquetas que contengan un solo atributo ya que si tiene mas de uno y lo cambiamos desde javaScript elimina todos los dem谩s.

otra forma para haber borrado el texto era
elemento.textContent = " "

Buenas tardes,

Yo lo realice la sustituci贸n del text utilizando la propiedad replaceChildren

Ejemplo:
pid.replaceChildren(img);

Muchas gracias.

Atentamente
Damian Arenales

Estaba todo preocupado pensando para que me sirve cambiar el HTML desde JS si lo puedo hacer directo en el index.html pero bueno al final de la clase Juandc explica para que se utiliza. Creo que lo debiste haber dicho al inicio de la clase @Juandc, en lo personal no me siento bien o mi cerebro no se siente c贸modo 馃槄cuando estoy aprendiendo algo sin saber porqu茅 o para que sirve.

Creo que va muy rapido, hacer una sola cosa a la vez ayudar铆a.

Algunas clases tambi茅n pueden ser solo texto

Que grande que es Juan David, la pasi贸n que le pone a las clases y lo bien que explica me hace sentir muy bien y se me hace las clases muy amenas y entretenidas, ademas de que aprendo un mont贸n. Hace tiempo que todo esto de la manipulaci贸n del dom me costaba entenderlo, pero juan lo explico tan bien que se me quedo grabado todo y le entend铆 todo muchas graciass!!!

Entretenida la clase

Chicos, les dejo las diferencias de append y appendChild

Append -> soporta nodos (etiquetas), y DOM-strings, permite a帽adir multiples items
( parent.append(child, childTwo, 鈥楬ello world鈥); )

AppendChild -> soporta solo nodos (etiquetas), Solo permite a帽adir un elemento
( parent.appendChild(child, childTwo, 鈥楬ello world鈥); )
puedes agregar varios, pero solo tomara el primer child e ignora el resto.

Estuve leyendo los posibles m茅todos que se desprenden de cada elemento y encontr茅 uno que se llama replaceWith

Funcion贸 perfecto 馃槃

pid.replaceWith(img)

Mi pr谩ctica para recordar mejor la clase.

HTML

<body>
    <h1 class="titulo1">Estoy pr谩cticando para manejar el DOM</h1>

    <p class="parrafo">El DOM es todo lo que conlleva HTML, este termino es usado para modificar el mismo HTML.</p>

    <h2>Aprende</h2>

    <input type="time" placeholder="a que horas estudias porfavor">

    <div>Contenedor de homero</div>

    <script src="./main.js"></script>

Js

const titulo = document.querySelector(".titulo1");
const parrafo = document.querySelector(".parrafo");
const input = document.querySelector("input");
const h2 = document.querySelector("h2");
const imgContaianer = document.querySelector("div");

console.log({titulo, parrafo, input, h2});
console.log(titulo, parrafo, input, h2);

console.log(input.value);

titulo.innerHTML = "Titulo editado con <br> innerHTML";

parrafo.innerText = "P谩rrafo editado con <br> innerText, no respeta el salto en linea porque no es innerHTML"

titulo.setAttribute("class", "modificado"); //modifica el que habia

titulo.classList.add("agregado"); // agrega la clase nueva

titulo.classList.remove("agregado");  //quita la clase

input.value = "02:03"; //agrega algo en el input

const imagen = document.createElement("img"); //img es el argumento que se le pasa, que es el nombre de la etiqueta en html

imagen.setAttribute("src", "https://w7.pngwing.com/pngs/499/485/png-transparent-homer-simpson-desktop-high-definition-television-1080p-homero-computer-logo-vertebrate-thumbnail.png"); 
//se agreg贸 el atributo "src" a la etiqueta img  que e sla que manda a llamar la imagen

console.log(imagen); //la imprime nada m谩s en la consola

imgContaianer.append(imagen); //append le paso la variable imagen (en la que tenia mi img) a la variable imgContainer donde tengo mi div.
  • la propiedad innerHTML nos permite modificar el html que este dentro del elemnto que estemos seleccionando.

El pr贸ximo Platzilive con Freddy promocionando Platzilg.

con respecto al peque帽o reto, yo lo hice accediendo a las propiedades del elemento p.
desde la consola podemos ver estas propiedades, dentro de childNodes hay una lista ( el texto y la imagen) selecciono con [0] para acceder a la lista text y dentro de este a la propiedad textContent.

pid.childNodes[0].textContent = ' ';

Con classList.contains te devuelve false o true en este caso false ya que verde se removi贸.

h1.classList.add(鈥榬ojo鈥); //agregando a nuestro elemento class a js
h1.classList.remove(鈥榲erde鈥); //elimina la clase verde del html
console.log(h1.classList.contains(鈥榲erde鈥));
//false (respuesta en consola)

Un uso practico para en getAttribute puede ser este:

// verifico si el atributo de P es activo
if(p.getAttribute(鈥榚stado鈥)==鈥榓ctivo鈥){
console.log(鈥榚sta activo鈥);
}else{// si no esta activo, envio mensaje
console.log(鈥No esta activo鈥);
}

Muy buena clase! Gracias!
馃懢馃懢馃懢

Escribir HTML desde JavaScript

Puedes escribir HTML desde JavaScript utilizando el m茅todo innerHTML de un elemento HTML o creando nuevos elementos y manipul谩ndolos utilizando el Document Object Model (DOM). Aqu铆 tienes ejemplos de ambas formas:

1. Usando innerHTML:


El m茅todo innerHTML te permite establecer u obtener el contenido HTML de un elemento. Puedes usarlo para crear o modificar contenido HTML en un elemento existente.

// Obtener un elemento existente
var elemento = document.getElementById("miElemento");

// Crear contenido HTML y asignarlo usando innerHTML
elemento.innerHTML = "<p>Este es un p谩rrafo creado desde JavaScript</p>";

2. Usando el DOM:


Puedes crear nuevos elementos, establecer atributos y contenido, y luego agregarlos al DOM.

// Crear un nuevo elemento <p>
var nuevoParrafo = document.createElement("p");

// Crear un nodo de texto
var texto = document.createTextNode("Este es un p谩rrafo creado desde JavaScript");

// Agregar el nodo de texto al elemento <p>
nuevoParrafo.appendChild(texto);

// Obtener un elemento existente para agregar el nuevo p谩rrafo
var contenedor = document.getElementById("miContenedor");

// Agregar el nuevo elemento <p> al contenedor
contenedor.appendChild(nuevoParrafo);


Recuerda que debes asegurarte de que el elemento exista en el DOM antes de intentar acceder o modificar su contenido. Puedes hacer esto poniendo tu script JavaScript al final del cuerpo de tu documento HTML o utilizando el evento DOMContentLoaded para esperar a que se cargue el DOM antes de manipularlo.

document.addEventListener("DOMContentLoaded", function() {
  // Tu c贸digo para manipular el DOM aqu铆
});


Es importante mencionar que la manipulaci贸n excesiva del DOM puede tener un impacto en el rendimiento de tu p谩gina, especialmente si est谩s realizando muchas modificaciones. En esos casos, es recomendable considerar enfoques m谩s eficientes, como la creaci贸n de plantillas o el uso de bibliotecas/frameworks como React o Vue.js.


Espero les haya sido de utilidad! 馃懆鈥嶐煉

Mi vida ha cambiado desde que conoc铆 los modernos monitores platzilg.

Tienen una resoluci贸n perfecta para programar!

11/27 Escribiendo HTML desde JavaScript

Vamos a ver las herramientas fundamentales para interactuar con p谩ginas que tengan HTML y CSS.

En el editor de c贸digo se puede utilizar la propiedad:

  • innerHTML

para modificar el contenido HTML dentro de una etiqueta.

Es importante tener en cuidado con la seguridad, ya que si el HTML es escrito por un usuario malintencionado, se puede ejecutar c贸digo malicioso. Para evitar esto, se puede utilizar la propiedad:

  • innerText en lugar de inner HTML

Para modificar los atributos de un elemento HTML en JavaScript. Se utiliza la funci贸n:

  • serAttribute

Para modificar un atributo, como la clase de un elemento, y la funci贸n:

  • classList

para agregar, quitar y comprobar la presencia de clases espec铆ficas en un elemento.

Se puede modificar el valor predeterminado de un elemento de entrada utilizando el atributo:

  • value

Y la propiedad:

  • input.value

Para modificar HTML desde JavaScript utilizando el atributo value de un input y la funci贸n

  • document.createElement

Para crear elementos HTMl desde cero.

Para insetar la imagen creada en un elemento existente en HTML utilizando propiedades:

  • classList - serAttribute

Para insertar una imagen en un contenedor existente de HTML utilizando JavaScript se crea una imagen y se le agregan atributos y despu茅s se inserta la imagen en el contenedor con la funci贸n:

  • append
  • appenChild

Es bueno no usar innerHTML ya que borra el contenido anterior. Se explica c贸mo solucionar esto borrando solo contenido anterior con:

  • pid.innerHTML

y luego agregando la imagen. Este proceso se llama manipulaci贸n del DOM desde JavaScript.

minuto 14:13 el profe dice que para utilizar el querySelector se debe utilizar con un hashtag si fuera un Id y con un punto si fuera un p谩rrafo. el punto se utiliza para las clases

JuanDC AKA profesor patito

Uff que buena clase, eso de setAtrtibute en su momento batalle bastante y mejor utilice Jquery, me volvi tan dependiente de Jquery que pense que no habia algo asi en js normal xd

Mis apuntes!

APUNTES

Viendo algunas de los autocompletados de VScode me encontr茅 con children, que te hace una lista de los hijos (por asi decirlo xd) que hay dentro del elemento.


const img = document.createElement(鈥img鈥);
img.setAttribute(鈥src鈥,鈥https://freevector-images.s3.amazonaws.com/uploads/vector/preview/40097/CuteFreeVectorDuck.jpg鈥);

//obtencion del 2 p en el html
body.children[2].innerText = 鈥 ';
body.appendChild(img); //se agrega la imagen

console.log(body);
 

const img = document.createElement(鈥榠mg鈥);
img.setAttribute(鈥榮rc鈥,鈥https://freevector-images.s3.amazonaws.com/uploads/vector/preview/40097/CuteFreeVectorDuck.jpg鈥);

//obtencion del 2 p en el html
body.children[2].innerText = 鈥 ';
body.appendChild(img); //se agrega la imagen

console.log(body);

m谩s o menos as铆 qued贸!!

A mi si me dio risa el chiste patito.

Sumo otra forma de modificar el nombre de la clase, por ej, de nuestro h1:

h1.className = 'pruebita'

Excelente clase, realmente siento que estoy aprendiendo

ESCRIBIENDO HTML DESDE JS

Hay distintas formas de escribir elementos en nuestro HTML desde nuestro c贸digo Javascript.

Por ejemplo:

  • Mediante la propiedad elemento.innerHTML("string y c贸digo") podemos modificar el HTML que est茅 dentro del elemento que estemos seleccionando, permite insertar tanto texto como estructura y elementos o etiquetas HTML.
  • Por otro lado, elemento.innerText("solo string") traduce todo a texto, no como elementos html, si por ejemplo colocas un <h1> no te lo va a interpretar como es.
  • Si quisieramos acceder a los atributos de una etiqueta HTML usamos el m茅todo elemento.getAttribute(鈥漚tributo鈥), que nos permite leer el atributo del elemento y almacenarlo en alguna variable
  • Por otro lado elemento.setAttribute(鈥漚tributo鈥, 鈥渧alor鈥) nos permite crear o cambiar atributos ya existentes recibiendo dos par谩metros, el primero es el atributo que queremos cambiar y el segundo es el nuevo valor que queremos darle.
  • Para modificar especificamente clases tenemos el m茅todo elemento.classList. que contiene diferentes m茅todos dentro de 茅l mismo, como classList.add para a帽adir una clase, o classList.remove para quitarla, classList.toggle enciende y apaga una clase, classList.contains devuelve true o false dependiendo si tiene la clase.
  • Para crear elementos desde cero tenemos una funci贸n especial llamada, document.createElement("ElementoHTML"), nos ayuda a crear un elemento html que nosotros querramos, lo almacenamos en alguna variable, y le podemos modificar sus atributos para agregarle clases o id.
  • Ese elemento que reci茅n creamos podemos a帽adirlo a un contenedor dentro de nuestro html usando diferentes m茅todos, por ejemplo podemos usar elementoPadre.append(鈥漞lementoHijo鈥) o appendChild o innerhtml o replaceWith.

La soluci贸n al 煤ltimo caso/reto quedar铆a mejor con:

p.innerHTML = img.outerHTML;

B谩sicamente .outerHTML proporciona el elemento HTML y sus atributos en forma de string, lo cual es precisamente lo que necesita innetHTML. En esta clase no funcion贸 ya que se intentaba setear el objeto como tal, o bueno, eso es lo que m谩s o menos entend铆, cualquier cosa est谩 la documentaci贸n oficial * - *

br es la etiqueta mas fea, jejeje

Resultado inesperado al insertar nodo img dentro del innerHTML de un nodo p.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso practico de JS - manipulacion del DOM</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Manipulacion basica del DOM</h1>
  <div>
    <h2>Tarjeta</h2>
    <img src="./assets/luca-bravo-XJXWbfSo2f0-unsplash.jpg" alt="pantalla de una laptop">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae fugiat, voluptatibus reprehenderit enim molestiae minus?</p>
  </div>
  <script src="./main.js"></script>
</body>
</html>
const h1 = document.querySelector('h1');
const div = document.querySelector('div');
const h2 = document.querySelector('h2');
const img = document.querySelector('img');
const p = document.querySelector('p');
console.log(h1);

h1.classList.add('title');
div.classList.add('card-container');
h2.classList.add('card__title');
img.classList.add('card__img');
p.classList.add('card__description');```

隆Superpoderes!

Es cierto que el curso anterior ten铆a la falla de que no se explicaba bien la manipulaci贸n del DOM. Aplaudo a Platzi porque siempre va mejorando y llenando cualquier vac铆o que pueda haber en su plataforma. Ense帽an con el ejemplo a c贸mo ser mejores d铆a a d铆a

M脡TODOS PARA CUALQUIER ELEMENTO HTML
https://developer.mozilla.org/es/docs/Web/API/Element#m.c3.a9todos
Ejemplos:

appendChild( appendedNode )

Inserta un nodo as铆 como el 煤ltimo nodo hijo de este elemento.

removeChild( removedNode )

Quita el nodo hijo desde el elemento actual.

replaceChild( insertedNode, replacedNode )

Reemplaza un nodo hijo en el elemento actual con otro.

uuhhmmm鈥esde el minuto 10 en adelante no entend铆 nada鈥 seguir practicando

appendchild es parecido al m茅todo .append pero en este caso solo admitir谩 nodos, por lo que NO podremos usar DOMString, es decir siempre que adjuntemos Nodos, podremos usar .append, .prepend y .appendchild, mientras que si queremos adjuntar una cadena de texto, solo podremos usar los m茅todos .append y .prepend.

Una de las cosas que se mencionan en el curso y que es muy 煤til es, cuando vas a crear o cambiar un elemento de tipo HTML, a HTML o a texto:

const elementoHtml = document.querySelector('p');
const elementoTexto = document.querySelector('p');

elementoHtml.innerHTML = 'Esto es un cambio de un elemento HTML a HTML';

elementoTexto.innerText = 'Esto es un texto normal';

鉁煢

Lo logr茅 usando innerHTML y outerHTML, e hice que la imagen aparezca al pulsar un bot贸n n.n
.

document.getElementById('contenedorImagen').innerHTML = nuevaImagen.outerHTML;

Yo utilic茅 la siguiente l铆nea de c贸digo para incrustar mi elemento HTML debajo del 煤ltimo elemento en mi HTML.

document.body.appendChild(img);

Est谩n geniales las clases estoy aprendiendo mucho a lo largo de los cursos. Cada vez mas motivado a seguir.

Mi cerebro va a explotar! toca repetir la clase completa en 0,50x para entender paso a paso. Pero no desistir 馃檶馃挌

Escribiendo HTML desde JavaScript:
Podemos escribir c贸digo de HTML desde JavaScript, utilizando algunas propiedades como: .innerHTML (que es lo m谩s normalmente usado para escribir c贸digo HTML), innerTexto (cuando escribimos c贸digo de HTML en JavaScript; pero para protegernos de los Jackes o personas mal intencionadas, todo el c贸digo se va a imprimir en texto, incluyendo las etiquetas de HTML).
Si queremos modificar los atributos, usamos algunas classes.
Pero qu茅 pasa si queremos darle una clase a nuestro elemento HTML, por ejemplo Patito; hay varias propiedades, la forma normal de modificar un atributo, por ejemplo tenemos:
.getAttribute (Nos ayuda a leer algunos atributos que tiene nuestro elemento).
.setAttribute (Nos ayuda a modificar los atributos o clases de nuestros elementos HTML.).

h1.classList.add(rojo); (Esta clase nos ayuda adherir atributos).
h1.classList.remove(鈥榲erde鈥); (Esta clase nos ayuda a eliminar atributos).
h1.classList.toggle(鈥榲erde鈥); esto es muy bueno cuando ya tenemos eventos de JavaScript, para que no solamente agreguemos o quitemos el atributo, dependiendo si ya tiene la clase o no, se la quitemos o se la pongamos cada vez que ejecutemos este toggle
h1.classList.contains(鈥榲erde鈥); es una especie de condicional que nos devuelve true o false, dependiendo si nuestro elemento tiene la clase que le estemos preguntando; todo esto es muy 煤til y nos ayuda a ahorrar l铆neas de c贸digo.
Toogle [Demasiado, demasiada.].
Contains [Contiene.].

Para modificar el value de un input de HTML, lo podemos borrar directamente desde nuestro HTML y en JavaScript simplemente escribimos input.value y le cambiamos su valor, sin necesidad de emplear las dos anteriores clases h1.classList.add(rojo);
h1.classList.remo ve(鈥榲erde鈥); input.value = 鈥456鈥

驴C贸mo creamos un elemento de HTML desde 0 en JavaScript?
Para eso hay una funci贸n especial llamada: document.createElement( ), que nos ayuda a crear el elemento de HTML desde cero que nosotros deseemos en JavaScript.
En el archivo de scriptHtml.js de VSCode, realizamos un console.log(document.createEle ment(鈥榠mg鈥)); para insertar una imagen de HTML en JavaScript y observamos que en la consola del navegador aparece insertado el c贸digo de <IMG> entre etiquetas de HTML.
驴C贸mo hacemos para que esta imagen no solamente aparezca en la consola, sino que tambi茅n la puedan ver nuestros usuarios desde el HTML, que es lo ideal?
Para eso tendr铆amos que agarrar a alg煤n elemento que exista en HTML y meter la imagen por dentro. En el archivo de HTML podemos meterla en el p谩rrafo del ID <p id=鈥減id鈥>.
Lo primero que vamos a hacer es crear nuestra imagen, para ello la vamos a guardarla en una variable con el nombre de img o con el nombre que t煤 quieras. Esta imagen funciona como cualquier otro selector de elementos en HTML, tiene todas las propiedades de getAttribute, setAttribute, classList, innerHTML(el innerHTML no sirve para las im谩genes porque est谩 vac铆a, ya que contiene propiedades).
/* Con el console.log, imprimimos en la consola la creaci贸n de la etiqueta de IMAGEN*/
console.log(document.createElement(鈥榠mg鈥));
/* Se crea la imagen con la class 鈥渄ocument.createE.鈥 y se la guarda en una variable./
const img = document.createElement(鈥榠mg鈥);
/
Se le dan los atributos a la imagen, en este caso se utiliza la class: 鈥渟etAttribute鈥, para que cambie el SRC por la imagen que buscamos en la URL*/
img.setAttribute(鈥榮rc鈥, 鈥https://static.platzi.com/static/images/conf/[email protected]鈥);
/* Metemos la IMG en alg煤n elemento que exista en HTML para poder verla en el navegador*/
pid.appendChild(img);
console.log(img);
驴C贸mo podr铆amos borrar el contenido que aparece en el navegador, que dice: 鈥淓sto es un p谩rrafo con ID y luego agregar nuestra imagen鈥?
Simplemente podr铆amos llamar a pid.innerHTML = 鈥溾; que sea igual a un string VACIO, para que borre todo el contenido que esta por dentro del p谩rrafo o el navegador; pero esto no borra el contenido del p谩rrafo sino todo lo que est谩 por dentro, y luego ejecutamos el c贸digo: pid.appendChild(img); para que aparezca nuestra imagen.

En mi caso. Quise hacer que cuando apretemos un bot贸n, me agregue un texto debajo de este. El resultado:
HTML
.
<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Document</title>

<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>

</head>
<body>
<h1 class=鈥渉1鈥>
Mi p谩gina web
</h1>
<form action="" class=鈥渇orm鈥>
<label for=鈥渢extInput鈥 class=鈥渇orm__label鈥>
Hola
<input type=鈥渢ext鈥 id=鈥渢extInput鈥 class=鈥渓abel__input鈥>
</label>
</form>
<button class=鈥渂utton鈥>
Mensaje bonito
</button>
</body>
</html>
.
JAVASCRIPT
.
const button = document.querySelector(".button");
const h2 = document.createElement(鈥渉2鈥);
document.body.appendChild(h2);

function addSentence() {
button.addEventListener(鈥榗lick鈥, function () {
if (h2.textContent.trim() == 鈥樷) {
h2.innerHTML = 鈥楢gregaste ese mensaje. GENIAL!鈥
} else {
h2.innerHTML = 鈥樷
}
})
};

addSentence();

Una opci贸n es obtener el string del objeto HTML

pid.innerHTML = img.outerHTML;

Seguro que hay una forma mejor de solucionar el reto pero ac谩 les dejo como se me ocurri贸 :v

pid.innerText=' ';
pid.append(img);

un easter egg si pegas esto

const img = document.createElement('img');
img.setAttribute('src', "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fexternal-preview.redd.it%2FjDK74IOVZNQ5CAJOBuA2i9U8gGtzp0vqwcLoY_g6064.jpg%3Fauto%3Dwebp%26s%3De69d902c2ddb201914a5f4022771b08a3f70e848&f=1&nofb=1&ipt=6c141d9d655add1efef72a57df4c243c2e7928cf709497aedbb17dcca634da77&ipo=images" )
pid.append(img);```

馃摑 Archivos del Proyecto 馃摑


Pasos 馃搶

  • 鈥 En la terminal, dentro de la carpeta del proyecto llamado curso-js-practico (para devolverse a esa carpeta estando en el otro mini-proyecto se ejecuta: cd ..), se crea otra carpeta para el mini-proyecto llamada escribiendo-html-desde-js ejecutando:
take  escribiendo-html-desde-js

  • 鈥 Abrir el editor VS Code ejecutando:
code .

  • 鈥 En el men煤 izquierdo de VS Code, crear un nuevo archivo llamado index.html, el c贸digo queda:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manipulaci贸n del DOM b谩sica - Curso Pr谩ctico de JavaScript</title>
</head>
<body>
	<h1 class="verde">Manipulaci贸n del DOM b谩sica</h1>

	<p>Esto es un p谩rrafo</p>
	<p class="parrafito">Esto es un p谩rrafo con clase</p>
	<p id="pid">Esto es un p谩rrafo con ID</p>

	<input placeholder="Escribe algo aqu铆" />

	<script src="./script.js"></script>
</body>
</html>

  • 鈥 Crear otro archivo llamado script.js, el c贸digo queda:
// h1 { color: red }
// .parrafito { ... }
// #pid { ... }

const h1 = document.querySelector('h1');
const p = document.querySelector('p');
const parrafito = document.getElementsByClassName('parrafito');
const pid = document.getElementById('pid');
const input = document.querySelector('input');

console.log(input.value);

console.log({
	h1,
	p,
	parrafito,
	pid,
	input,
});

h1.innerHTML = 'Patito <br> Feo';
h1.innerText = 'Patito <br> Feo';
// console.log(h1.getAttribute('class'));
// h1.setAttribute('class', 'rojo');

h1.classList.add('rojo');
h1.classList.remove('verde');
// h1.classList.toggle('verde');
// h1.classList.contains('verde');

input.value = "456"

const img = document.createElement('img');
img.setAttribute('src', 'https://static.platzi.com/static/images/conf/[email protected]');
console.log(img);

pid.innerHTML = "";
pid.appendChild(img);

  • 鈥 Para correr el script, se da click derecho sobre el nombre de index.html en el men煤 de VS Code y se selecciona 鈥淥pen with Live Server鈥, aparece un navegador, se da click derecho en la p谩gina y se selecciona 鈥淚nspeccionar鈥, luego se selecciona la pesta帽a 鈥淐onsole鈥.
  • 鈥 Cuando se recarga la p谩gina, en la consola aparece : los valores vinculados a h1, p, parrafito, pid e input y los atributos de la imagen img.

Diferencia entre append y appendChild

Para el caso de .append() permite agregar textos, por ejemplo element.append(鈥淪ome text鈥, p). Sin embargo .appendChild() solo acepta elementos.

Por otro lado .append() no retorna ningun valor, sin embargo .appendChild() retorna el valor que fue agregado.

algo me dice que le gustan los patitos

Es importante tener en cuenta que la propiedad innerText no devuelve el texto dentro de elementos ocultos por CSS, mientras que la propiedad textContent devuelve todo el texto dentro de un elemento, incluso si est谩 oculto por CSS

En el minuto 10:28 se bugea el audio

Los template literals (tambi茅n conocidos como template strings) son una caracter铆stica de ES6 que permiten incluir variables y expresiones dentro de una cadena de texto. Esto puede ser 煤til para generar HTML din谩micamente. Por ejemplo:

let nombre = 鈥淛uan鈥;
let edad = 30;
let html = <p>Nombre: ${nombre}</p><p>Edad: ${edad}</p>;
document.getElementById(鈥渕iDiv鈥).innerHTML = html;

Les dejo mis notas de la clase.猬囷笍

Modificando etiquetas HTML desde JS


  • h1.innerHTML = 鈥淣uevo texto鈥; 鈬 inserta texto html
  • h1.innerText = 鈥淣uevo texto鈥; 鈬 cambia por texto plano
  • h1.getAttribute(鈥漚tributo鈥); 鈬 trae el valor del atributo de la etiqueta h1 desde el html
  • h1.setAttribute(鈥渁tributo a modificar鈥, 鈥渘uevo valor鈥);
  • h1.classList.add(鈥渞ojo鈥) 鈬 agrega clases
  • h1.classList.remove(鈥渧erde鈥) 鈬 elimina una clase
  • h1.classList.contains(鈥渧erde鈥) 鈬 devuelve true o false si el elemento tiene o no la clase
  • input.value = 鈥456鈥; 鈬 modifica el value de un input
  • h1.innerHTML = 鈥溾; 鈬 elimina el contenido de una etiqueta

Como crear un elemento HTML desde JS

  • document.createElement(鈥渟pan鈥); 鈬 crea una etiqueta en html

Como agrear una etiqueta nueva dentro de otra desde JS

  1. const img = document.createElement(鈥渋mg鈥);
    Crea la etiqueta img y la guarda en const img.
  2. img.setAttribute(鈥渟rc鈥,鈥https://source.unsplash.com/55ijBDBaz_k鈥)
    A la itiqueta const img le crea el atributo src con el valor url de la imagen.
  3. pid.appendChild(img)
    a la etiqueta pid (previamente guardada en una variable) le agrega como hijo la itiqueta img que ya contiene el atributo src

A mi funcion贸 con el signo # delante de pid:

const h1 = document.querySelector('h1'); 
const p = document.querySelector('p');
const parrafito = document.querySelector('.parrafito');
const pid = document.querySelector('#pid'); //ACA  ACA
const input = document.querySelector('input');


console.log(h1);
console.log({
    h1,
    p,
    parrafito,
    pid,
    input,
});
const picture = document.createElement("img");

picture.setAttribute("src", "https://images.pexels.com/photos/1337386/pexels-photo-1337386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");

picture.setAttribute("width", "300px");
picture.setAttribute("height", "150px");
console.log(picture);

pid.innerHTML = "";   
pid.append(picture);

Patito 馃, la leyenda de javascript

DIFERENCIA DE APPENDCHILD CON APPEND

Append() permite agregar tanto nodos (variables que almacenan c贸digo JS con refrencia a document) como cadenas de texto (un string como 鈥淗ola鈥) directamente al elemento HTML. Pero appnedChild() solo permite insertar nodos.

Append() permite agregar varios argumentos a la vez, pero appendChild() solo uno 1x1.

M谩s informaci贸n aqu铆.

!

Vaya que funciones m谩s interesantes para manipular el DOM, saber que existen son geniales!

No son buenas practicas agregar clases desde JS

Yo lo resolv铆 as铆

pid.append(img);

if(pid.contains(img)){
	pid.innerText = "";
	pid.append(img);
}

Yo lo del error de poner el 鈥#鈥 en 鈥済etElementById鈥, y el 鈥.鈥 en 鈥済etElementsByClassName鈥, me di cuenta y lo arregle desde la clase anterior porque me sal铆a null en la consola, no como a 茅l que s铆 le sal铆a los datos, entonces probe con quitar los 鈥#鈥 y 鈥.鈥, por lo que me salve de que me diera error en esta clase xD. No iba a poner este comentario porque en realidad no aporta nada, pero lo pondr茅 de todas formas para as铆 recordar que no se ponen los signos gracias a esta an茅cdota que me pas贸.

buena clase

sapeeee

Un articulo interesante sobre la diferencia entre append y appendChild: Link

<h1>Patito 馃馃馃</h1>

Realmente es complejo que la explicaci贸n no sea clara, habla mucho, se confunde bastante y finalmente no explica las diferencias.

No entend铆 para que es esta clase, la verdad, estas cosas si las vamos a llegar a utilizar en un trabajo? de momento no le veo utilidad a esto que nos est谩n ense帽ando

Al peque帽o reto, esta fue mi soluci贸n

const newimg=document.createElement('img');
newimg.src='https://static.platzi.com/static/images/conf/[email protected]';
pid.replaceWith(newimg) 

para crear un elemento HTML utilizamos una funci贸n llamada, docuemnt.createElement(鈥渆tiquetaHTML鈥), pero esta solo crea el elemento, pero sin agergarlo en ninguna parte del documento HTML, para eso se utiliza una funci贸n especializada para agregar elementos HTML al documento, como append() o appendChild().

innerHTML e innerText funcionan de forma cimilar, con la diferencia, que en innerHTML admite etiquetas HTML legibles para el navegador, mientras que innerText lo interpreta todo como texto

Me encanta este curso lo estoy disfrutando mucho, la forma de explicar, muy din谩mica y amena, me recuerda mucho a Jexs el youtuber

鈥楶atito鈥欌 No se me ocurre nada mas jajajja

Escribi todo tal cual el curso pero me aparece error
Ayuda.
.

Diferencia entre .append() y appendChild()

El m茅todo append acepta valores en formato de objetos (Node Objects) y tambi茅n elementos en formato de texto (DOMStrings), mientras que appendChild solo acepta objetos.

//Esto ser铆a un nodo de HTML en forma de objeto (Node Object):
const img = document.querySelector()
h1.append(img)

//Esto ser铆a un elemento de HTML como texto plano (DOMString)
h1.append('<img src=""')
//Cualquier texto (String) de javascript puede ser v谩lido para el m茅todo append.
h1.append("Hola")

Por favor corr铆janme si me equivoco. 馃挌馃槉

comparto la misma opinion de juanDC en la intro鈥 por el momento el curso va rebien!

este curso esta para verse varias veces

Este muchacho cuando uno menos piensa grita, manotea y lo asusta a uno 馃槀 Es muy particular el profesor, pero por lo menos se refiere a todos y todas, y no solo en femenino como tantos otros de Platzi