Intentando entender un append Intentando entender un append


Mostrando resultados del 1 al 4 de 4
  1. #1
    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:
    <!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:
    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!!!

  2. #2
    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.
    Última edición por yeik1989; 13-abr-2019 a las 12:53 Razón: Extender respuesta
    Citar Citar  

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

    Saludos!
    Citar Citar  

  4. #4
    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!!
    Citar Citar  



Temas similares

  1. Intentando localizar a edujerez
    A principios del fin de semana pasado, edujerez me pidió una reseña por MP en un post que hice en el que vendía reseñas, solo que no se pronunció en...
    Respuestas: 7
    Último mensaje: 28-oct-2014
  2. intentando actualizar vb4.1.7 a vb4.2.1
    Buenas compis intentando actualizar a la 4.2.1 desde el area de miembros no veo la forma de descargarla solo veo la opcion de la vb 5, estoy cegato o...
    Respuestas: 2
    Último mensaje: 23-sep-2013
  3. Intentando entender a AdFLly
    Hola Betas, He leído algo sobre AdFly, que se puede monetizar con ellos, y que es una alternativa interesante para generar ingresos, bla, bla. ...
    Respuestas: 6
    Último mensaje: 12-abr-2013
  4. Intentando Mudar de blogspot a .com
    que onda chavos super cool xD! pues si hoy acavo de comprar mi dominio y pues estube viendo algunos tutoriales y asi pues y ya hice todo pero al...
    Respuestas: 4
    Último mensaje: 26-jul-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •