Intentando entender un append

Barakas · 10 Abr 2019

Muy buenas,

Estoy intentando entender un código que he visto (ingeniería inversa :caravolteada🙂 pero no llego a entender el funcionamiento del append.

Es un problema de novato total, pero bueno, llevo atascado un día aquí y no encuentro la lógica.

Os pongo el código HTML:

Insertar CODE, HTML o PHP:

<!DOCTYPE HTML>
<html lang="es">

<head>
	<meta charset="utf-8">
	<title>Operando con JSON</title>
	
</head>
<body>
	<h1>JSON</h1>
	<div id="coins">
		<h2>Monedas</h2>
	</div>

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

</html>

Y el Javascript:

Insertar CODE, HTML o PHP:

'use strict'

// JSON - Javascript Object Notation


var cryptos = {
	titulo: 'Bitcoin',
	year: 2009,
	creador: 'Satoshi Nakamoto'
};

var monedas = [
	{titulo: "Euro", year: 2000, pais: "España"},
	cryptos
];


var caja_monedas = document.querySelector("#coins");
var index;
for (index in monedas){
	var p = document.createElement("p");
	p.append(monedas[index].titulo + " - " + monedas[index].year);
	caja_monedas.append(p);
}

Por lo que entiendo ocurre lo siguiente:

1. Se crea una variable llamada caja_monedas que es un querySelector del div con id #coins. Esto se utiliza para modificar dicho div.
2. Se crea un bucle for in donde primero se forma una variable (p) donde se crea el elemento .
3. En el mismo bucle se concatena el con el array mediante un append -> p.append(monedas[index].titulo + " - " + monedas[index].year);
4. Se concatena caja_monedas con el .

Creo que lo estoy analizando mal porque no tiene sentido según lo entiendo.
En todo caso, se debería concatenar de esta forma:

querySelector++array+

Es decir, el querySelector es quien da la "orden" de modificar ese div en el html, seguido de para abrir párrafo y por último el array. Pero esa última línea de javascript...me da que no lo estoy entiendo bien.

¿Algún rayo de luz?

Gracias!!! 🙂

yeik1989 · 13 Abr 2019

No se concatena. Append incluye HTML dentro de otro elemento HTML.

document.createElement('p') crea en memoria un elemento HTML completo del tipo p (no es que simplemente añada la cadena al html).
Luego a ese elemento, que solo existe en la memoria del navegador, dentro de la variable p, se le hace un .append para meter HTML dentro (en este caso una simple cadena).
Después se le hace .append a la caja de monedas para meter HTML dentro otra vez, en este caso el elemento que estaba en memoria, en la variable p.

Por cierto, querySelector no modifica nada. document.querySelector te devuelve el primer elemento HTML del DOM que coincida con el selector que le pases por parámetro. Es append lo que modifica el elemento. Realmente es que el elemento está sincronizado con el DOM porque es el propio div de la caja lo que estás manipulando, podrías hacer lo mismo modificando directamente su variable .innerHTML y añadiendo ahi una cadena con el HTML que quieras mostrar.

Barakas · 13 Abr 2019

Muchísimas gracias por tu respuesta, me ha quedado muy claro y ahora lo entiendo bien 🙂🙂🙂🙂

Saludos!

colobaggins · 15 Abr 2019

Hola compañero..
El array no lo imprime como tal, ya que se está accediendo al contenido mediante el índice y la propiedad dentro .. array [posición].titulo esto no imprime array sino un título

Saludos!!

Intentando entender un append

Barakas

yeik1989

Barakas

colobaggins

Temas similares