Escribiendo HTML desde JavaScript

Yo agregué un **replaceWith **y me salió “considero 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);

Alex Chipre

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(‘titulo’)

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(‘titulo’)

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

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

9. .value = ‘valor’

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);

José Pérez

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

Juan Camilo Valencia Silva

¡Qué clase tan bacanaaaaaaaa! 🚀

George Bryant Gutiérrez Gastélum

Imagen que usa el profesor en el ejemplo:

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

Juan Fernando Yepes Muñoz

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

César Augusto Cortés Labrada

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');

Julia Gabriela Nieva Paredes

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:

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.
getElementsByClassName: regresa un objeto similar a una matriz con todos los elementos secundarios que tienen todos los nombres de clase dados.
getElementById: Devuelve una referencia al elemento por su id.
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:

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)
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>.
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 “”
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.
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.
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.

Gustavo Campos

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: “No debo hacer propaganda porque no nos han pagado” (Piensa un segundo) pantalla = Platzi-LG JAJAJAJJA morí.

Cristian Morales

Platzilg fue lo mejor de esta clase

JoaoGarduno

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

JoaoGarduno

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');

YEISON FERNANDO CASTAÑO UBILLUS

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ó

Pedro Blanco Figueredo

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;

Mauricio Cox

Captura de Pantalla 2022-08-19 a la(s) 07.26.59.png

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.

Angel Garcia

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

Charles Duck Castillo Rosas

Mis apuntes de este curso en Notion

Gualberto Montiel

Damian Ricardo Arenales Hernández

Buenas tardes,

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

Ejemplo:
pid.replaceChildren(img);

Muchas gracias.

Atentamente
Damian Arenales

freddygoberna

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.

Jorge Enrique Chavez Otalvaro

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

Algunas clases también pueden ser solo texto

Ivan Soca

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!!!

Emilio Salvatore Ampuero Sepúlveda

Entretenida la clase

victor cisneros

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, ‘Hello world’); )

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

Diego César Lerma Torres

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

Funcionó perfecto 😄

pid.replaceWith(img)

Elías Yoel Romero Sánchez

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>

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.

Camila Esmeralda Molina Pineda

la propiedad innerHTML nos permite modificar el html que este dentro del elemnto que estemos seleccionando.

David Ospina Benítez

El próximo Platzilive con Freddy promocionando Platzilg.

Joe Pulgarin

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 = ' ';

Jesús alfaro

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

h1.classList.add(‘rojo’); //agregando a nuestro elemento class a js
h1.classList.remove(‘verde’); //elimina la clase verde del html
console.log(h1.classList.contains(‘verde’));
//false (respuesta en consola)

Alejandro González

Un uso practico para en getAttribute puede ser este:

// verifico si el atributo de P es activo
if(p.getAttribute(‘estado’)==‘activo’){
console.log(‘esta activo’);
}else{// si no esta activo, envio mensaje
console.log(‘No esta activo’);
}

YEISON FERNANDO CASTAÑO UBILLUS

Juliana Vega

Muy buena clase! Gracias!
👾👾👾

Luis Alfredo Suarez

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! 👨‍💻

Eduardo Zegers

hace 5 meses

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

Tienen una resolución perfecta para programar!

Carlos Andrade

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.

Oriol Fernando Palacios Durand

Rodrigo Viveros Ramirez

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

JULIAN ANDRES SEGURA GONZALEZ

JuanDC AKA profesor patito

Miguel Angel de Jesus Rosales Ramos

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

Jonathan David Olivos

Mis apuntes!

APUNTES

Adrian Restrepo

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(‘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);

más o menos así quedó!!

Israel Castro Urieta

A mi si me dio risa el chiste patito.

Mariano Gobea Alcoba

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

h1.className = 'pruebita'

Luis David Perez

Excelente clase, realmente siento que estoy aprendiendo

JUAN JOSE HERNANDEZ MUÑOZ

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(”atributo”), que nos permite leer el atributo del elemento y almacenarlo en alguna variable
Por otro lado elemento.setAttribute(”atributo”, “valor”) 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(”elementoHijo”) o appendChild o innerhtml o replaceWith.

LESTHER XITUMUL MANUEL

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 * - *

Tomás André Peñaloza Avilés

Fuente: www.javascripttutorial.net

John Jairo Pico Parra

br es la etiqueta mas fea, jejeje

Edgar Elihu Garcia

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

Victor Hugo Cruz Carballo

<!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');```

César Luis Amundaray Rodríguez

¡Superpoderes!

Jesús Álvarez

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

Obed Tzay

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.

Johann Moncayo

uuhhmmm…desde el minuto 10 en adelante no entendí nada…a seguir practicando

Cecilio Cauich

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.

JoaoGarduno

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';

Cristian Acalo

hace 11 días

✨🦄

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;

Gabriel Muñoz

hace un mes

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);

Jesús Eduardo Castillo Saavedra

hace un mes

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

Patricia Mago

hace un mes

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

Alexander Ortiz Alonso

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(‘verde’); (Esta clase nos ayuda a eliminar atributos).
h1.classList.toggle(‘verde’); 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(‘verde’); 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(‘verde’); 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(‘img’)); 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=“pid”>.
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(‘img’));
/* Se crea la imagen con la class “document.createE.” y se la guarda en una variable./
const img = document.createElement(‘img’);
/ Se le dan los atributos a la imagen, en este caso se utiliza la class: “setAttribute”, para que cambie el SRC por la imagen que buscamos en la URL*/
img.setAttribute(‘src’, ‘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: “Esto 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.

Antonio Maldonado

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=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=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=“h1”>
Mi página web
</h1>
<form action="" class=“form”>
<label for=“textInput” class=“form__label”>
Hola
<input type=“text” id=“textInput” class=“label__input”>
</label>
</form>
<button class=“button”>
Mensaje bonito
</button>
</body>
</html>
.
JAVASCRIPT
.
const button = document.querySelector(".button");
const h2 = document.createElement(“h2”);
document.body.appendChild(h2);

function addSentence() {
button.addEventListener(‘click’, function () {
if (h2.textContent.trim() == ‘’) {
h2.innerHTML = ‘Agregaste ese mensaje. GENIAL!’
} else {
h2.innerHTML = ‘’
}
})
};

addSentence();

Enrique Uzcategui

Una opción es obtener el string del objeto HTML

pid.innerHTML = img.outerHTML;

Santiago Forero Mendez

hace 3 meses

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

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

rusbel bermúdez rivera

hace 3 meses

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);```

Maria Gabriela Rodriguez Cuevas

hace 4 meses

📝 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 “Open with Live Server”, aparece un navegador, se da click derecho en la página y se selecciona “Inspeccionar”, luego se selecciona la pestaña “Console”.
• 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.

Daniela Suárez

hace 4 meses

Diferencia entre append y appendChild

Para el caso de .append() permite agregar textos, por ejemplo element.append(“Some 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.

Beder Danilo Casa Condori

hace 5 meses

algo me dice que le gustan los patitos

Nathaly Andreina Peña Camara

hace 5 meses

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

Aaron Santiago Loyo Zabala

En el minuto 10:28 se bugea el audio

Julián Guacaneme

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 = “Juan”;
let edad = 30;
let html = <p>Nombre: ${nombre}</p><p>Edad: ${edad}</p>;
document.getElementById(“miDiv”).innerHTML = html;

Daniel Merchán Cáceres

Les dejo mis notas de la clase.⬇️

Modificando etiquetas HTML desde JS

h1.innerHTML = “Nuevo texto”; ⇒ inserta texto html
h1.innerText = “Nuevo texto”; ⇒ cambia por texto plano
h1.getAttribute(”atributo”); ⇒ trae el valor del atributo de la etiqueta h1 desde el html
h1.setAttribute(“atributo a modificar”, “nuevo valor”);
h1.classList.add(“rojo”) ⇒ agrega clases
h1.classList.remove(“verde”) ⇒ elimina una clase
h1.classList.contains(“verde”) ⇒ 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(“span”); ⇒ crea una etiqueta en html

Como agrear una etiqueta nueva dentro de otra desde JS

const img = document.createElement(“img”);
Crea la etiqueta img y la guarda en const img.
img.setAttribute(“src”,“https://source.unsplash.com/55ijBDBaz_k”)
A la itiqueta const img le crea el atributo src con el valor url de la imagen.
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

Wilman Garcia

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);

Jose Villatoro

Patito 🦆, la leyenda de javascript

Ricardo Alfonso Chavez Vilcapoma

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 “Hola”) 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í.

Elvis Milan

Raymondi Alejandro Ramos Vásquez

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

Carlos Daniel De Leon

No son buenas practicas agregar clases desde JS

Francisco Rivera

Yo lo resolví así

pid.append(img);

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

Jesús Enrique Barrios Bolívar

Yo lo del error de poner el “#” en “getElementById”, y el “.” en “getElementsByClassName”, 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ó.

victor rodriguez

buena clase

Tomas Flores

sapeeee

Alejandro Mejia Escobar

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

Dairo Ariza

<h1>Patito 🦆🦆🦆</h1>

Carlos Eduardo Mayorga Rodríguez

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

Juan Pablo Davila Cano

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

Luis Miguel Rodriguez

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)

Aaron Yamir Fernando Quintana Lobos

para crear un elemento HTML utilizamos una función llamada, docuemnt.createElement(“etiquetaHTML”), 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().

Aaron Yamir Fernando Quintana Lobos

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

Sabad Josue Perez Rodriguez

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

Juan Camilo Rivas Molina

‘Patito’— No se me ocurre nada mas jajajja

Camilo Manrique

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

Willy Emanuel Antunez Gonzales

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. 💚😊

milton coronado

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

Stephany Plaza

este curso esta para verse varias veces

DIEGO LEON ARCILA HERRERA