5

Soy nuevo en JavaScript, pero ya programé en varios lenguajes... No logro entender el porque cuando hago :

<body>
<div id="cont"> </div>

<script>
        const cont = document.getElementById("cont");
        const p = document.createElement("p");
        p.innerText = "Lorem Ipsum";
        document.write(cont.appendChild(p));
</script>

Me muestra por pantalla : [object HTMLParagraphElement]

¿Seria un array de objeto HTMLParapraphElement?¿ Porque no me imprime el lorem Ipsum dos veces?

1
  • Pasandolo a otro lenguaje... es como cuando pongo en JAVA: ArrayList<int> array ; System.out.println(array); el 2 ago. 2018 a las 18:48

4 respuestas 4

3

El problema es que document.write se utiliza para escribir texto solamente y appendChild retorna un objeto. No necesitas el document.write:

<body>
<div id="cont"> </div>

<script>
        var cont = document.getElementById("cont");
        var p = document.createElement("p");
        p.innerText = "Lorem Ipsum";
        cont.appendChild(p);
</script>

1

Te dejo este ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="cont"></div>
<script>
        const p = document.createElement("p");
        p.innerText = "Lorem Ipsum";
        const cont = document.getElementById("cont").appendChild(p)
</script>
</body>
</html>

  1. Sería en todo caso que primero crees dicho elemento p
  2. Después a ese elemento recién creado le añades el texto "Lorem Ipsum"
  3. Al final obtienes el id que si existe desde el inicio con getElementById() y al final con la propiedad appendChild() le indicas que tendrá un elemento p creado

Para este caso especifico const es el elemento padre y child es el nodo que se va a agregar al final de dicho elemento

Para mayor información favor de consultar https://developer.mozilla.org/es/docs/Web/API/Node/appendChild

2
  • Genioo!! Ahora entendi todo muchas gracias!!!.. Soy nuevo en stack Overflow. Como puedo agradecerte, mediante puntos? no entiendo nada jaj el 2 ago. 2018 a las 18:53
  • la respuesta que consideras resolvió tu duda la puedes aceptar dando click en la palomita que esta justo a lado de ella; cualquiera de las 2 respuestas que te haya servido @JuanFrancoNarváez te anexaré una fuente confiable de consulta
    – user75901
    el 2 ago. 2018 a las 18:54
1

Veo que todas las respuestas se basan en hacer funcionar tu código, pero no responden a ninguna de tus preguntas.

¿Seria un array de objeto HTMLParapraphElement?

No, lo que estás viendo es la representación en String del objeto HTMLParagraphElement, que es justamente lo que ves si haces:

console.log(document.createElement('p').toString())
// o
console.log(`${document.createElement('p')}`)
//o
console.log('' + document.createElement('p'))

// por ejemplo un objeto {} su representación es [object Object]
console.log('' + {});

En tú código appendChild devuelve el nodo insertado si se inserta y así es que ves [object HTMLParagraphElement].

Internamente document.write intentará llamar al método toString o similar si el objeto pasado no es un string.

¿Porque no me imprime el lorem Ipsum dos veces?

Porqué debería siquiera "imprimirlo" una vez?. Yo por "imprimir" entiendo que es mostrar algo por la consola de desarrollador.

Pero entendiendo tu pregunta y reformulándola a:

¿Porque no me renderiza en el DOM el tag p dos veces?

Porque solo lo insertas una vez dentro del div con id = cont. El cual ya estaba creado.

Si tu duda es si createElement inserta elementos en el DOM, la respuesta es no. De todas formas con el document.write estabas eliminando todo el contenido que hubiera.

0

Tu caso es muy valido, solo te falto hacer un innerText ya que sino vas a querer agregar appendChild en su elemento real. Con innerText vas a volcar el contenido del nodo.-

const cont = document.getElementById("cont");
        const p = document.createElement("p");
        p.innerText = "Lorem Ipsume";
        document.write(cont.appendChild(p).innerText);
<div id="cont"> </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.