Muy buenas,
Estoy intentando entender un código que he visto (ingeniería inversa
) 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:
Código HTML:
<!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>
Javascript
:
Código:
'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 <p>.
3. En el mismo bucle se concatena el <p> con el array mediante un append -> p.append(monedas[index].titulo + " - " + monedas[index].year);
4. Se concatena caja_monedas con el <p>.
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+<p>+array+<p>
Es decir, el querySelector es quien da la "orden" de modificar ese div en el html, seguido de <p> 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!!