0

Estoy intentando crear un div con texto dentro de él desde Javascript, pero me da el error 'null' y no entiendo cual es el error del código.

/* Playing with DOM */
window.addEventListener("load", function () {
    document.body.setAttribute('style', 'background-color: grey;');
    var mainDiv = document.createElement("DIV");
    mainDiv.setAttribute('style', 'background-color: white; width: 200px; height: 200px; position: absolute; border: 2px solid red;');
    mainDiv.setAttribute('id', 'main');
    var mainText = document.createElement("H4");
    var iText = document.createTextNode("Coma flotante");
    var mainTextB = document.createElement("B");
    var iTextB = document.createTextNode("Estoy aprendiendo a usar el DOM y además las comas flotantes. 4 * 0.2 es equivalente a 4 * .2");
    mainTextB.appendChild(iTextB);
    var geta = document.getElementById('main');
    var ultimo = geta.childNodes[0]; // <-- ERROR !
    ultimo.parentNode.insertBefore(ultimo, mainTextB);
    mainText.setAttribute('style', 'text-align: center; text-decoration: underline');
    mainText.appendChild(iText);
    mainDiv.appendChild(mainText);
    document.body.appendChild(mainDiv);
    /*mainDiv.addEventListener("click", function () {

        doV('dos', '300', '300', 'red', 'Textualizado');
    });*/

});
<!doctype html>

<html>
<script src="main.js"></script>
<head>
    <title>Eduardo Sebastián</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
</head>

<body>

</body>

</html>

1
  • Con hacer mainDiv.childNodes te valdría porque tu geta quieres que tenga el valor de mainDiv
    – G3l0
    el 19 jun. 2017 a las 6:37

3 respuestas 3

2

Tienes varios problemas. El primero, como dice @Asier es que has creado el div pero no lo has añadido al documento (resumiendo su buena explicacion). Eso se arreglaría de la siguiente manera

document.body.appendChild(mainDiv);//<- Asi añades el mainDiv al HTML
var geta = document.getElementById('main');
var ultimo = geta.childNodes[0];

El siguiente problema te lo encuentras en la siguiente linea

ultimo.parentNode.insertBefore(ultimo, mainTextB);

Esto es porque tampoco has añadido ningún hijo al mainDiv, por lo que geta.childNodes[0]; es undefined.

Esto lo arreglas en el momento que creas el primer texto, tienes que añadir el texto a su nodo, y el nodo a el mainDiv

var mainText = document.createElement("H4");
var iText = document.createTextNode("Coma flotante");
mainText.appendChild(iText);
mainDiv.appendChild(mainText);

Despues de esto se te presentara el siguiente error

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Eso es porque estas intentando añadir ultimo despues de mainTextB,dado que mainTextB todavia no ha sido añadido al documento te da error.

Para solucionar esto simplemente cambia el orden del insertBefore:

ultimo.parentNode.insertBefore(mainTextB,ultimo);

Te dejo el script completo para que puedas seguir con tus pruebas.

/* Playing with DOM */
window.addEventListener("load", function () {
    document.body.setAttribute('style', 'background-color: grey;');
    var mainDiv = document.createElement("DIV");
    mainDiv.setAttribute('style', 'background-color: white; width: 200px; height: 200px; position: absolute; border: 2px solid red;');
    mainDiv.setAttribute('id', 'main');
    var mainText = document.createElement("H4");
    var iText = document.createTextNode("Coma flotante");
    mainText.appendChild(iText);
    mainDiv.appendChild(mainText);
    
    
    var mainTextB = document.createElement("B");
    var iTextB = document.createTextNode("Estoy aprendiendo a usar el DOM y además las comas flotantes. 4 * 0.2 es equivalente a 4 * .2");
    mainTextB.appendChild(iTextB);    
    document.body.appendChild(mainDiv);//<- Asi añades el mainDiv al HTML
    var geta = document.getElementById('main');
    var ultimo = geta.childNodes[0]; // <-- ERROR !
    ultimo.parentNode.insertBefore(mainTextB,ultimo);
    
    mainText.setAttribute('style', 'text-align: center; text-decoration: underline');
    mainText.appendChild(iText);
    mainDiv.appendChild(mainText);
    document.body.appendChild(mainDiv);
    /*mainDiv.addEventListener("click", function () {

        doV('dos', '300', '300', 'red', 'Textualizado');
    });*/

});
<!doctype html>

<html>
<script src="main.js"></script>
<head>
    <title>Eduardo Sebastián</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
</head>

<body>

</body>

</html>

4
  • me podrías explicar un poco mejor , porqué lo del cambio? funciona pero no entendí mucho eso
    – ESCM
    el 19 jun. 2017 a las 11:22
  • @EduardoSebastian que cambio quieres que te explique exactamente? el 19 jun. 2017 a las 11:23
  • En el orden del insertBefore
    – ESCM
    el 19 jun. 2017 a las 11:52
  • @EduardoSebastian es cosa del metodo de JavaScript, aqui puedes verlo w3schools.com/jsref/met_node_insertbefore.asp. En el ´insertBefore´ el primer parametro que usas es el elemento que añades, y el segundo el elemento al que estas añadiendo. el 19 jun. 2017 a las 11:56
2

El problema está en las instrucciones:

var geta = document.getElementById('main');
var ultimo = geta.childNodes[0]; // <-- ERROR !**texto en negrita**

En la variable geta tratas de almacenar el elemento con id = 'main' del document. Pero este no existe. Sí has creado un div con id 'main' en la variable mainDiv pero no has añadido este elemento al document y, por tanto, no existe dentro de éste.

Luego cuando intentas obtener el primer hijo del elemento contenido en la variable geta (que no es ninguno, dado que la búsqueda anterior no ha devuelto ningún resultado) te genera el error.

1

El problema esta en que intentando hacer una consulta de un elemento que aunque ya creaste no le has insertado en el DOM, ademas tienes un error en la implementación del insertBefore, en todo caso tu fallo es en el orden de las cosas.

/* Playing with DOM */
window.addEventListener("load", function () {
    document.body.setAttribute('style', 'background-color: grey;');
    var mainDiv = document.createElement("DIV");
    mainDiv.setAttribute('style', 'background-color: white; width: 200px; height: 200px; position: absolute; border: 2px solid red;');
    mainDiv.setAttribute('id', 'main');
    var mainText = document.createElement("H4");
    var iText = document.createTextNode("Coma flotante");
    var mainTextB = document.createElement("B");
    var iTextB = document.createTextNode("Estoy aprendiendo a usar el DOM y además las comas flotantes. 4 * 0.2 es equivalente a 4 * .2");
    /** Primero es necesario agregar los elementos creador al DOM*/
    document.body.appendChild(mainDiv);
    mainDiv.appendChild(mainText);
    mainText.setAttribute('style', 'text-align: center; text-decoration: underline');
    mainText.appendChild(iText);
    mainTextB.appendChild(iTextB); 
    /** getElementaryById(...) buscara los elementos existentes en el DOM **/
    var geta = document.getElementById('main');  
    var ultimo = geta.childNodes[0]; 
    /** Aqui habia una mala implentación del insertBefore */
    ultimo.parentNode.insertBefore(mainTextB, ultimo);
    
    /*mainDiv.addEventListener("click", function () {
        doV('dos', '300', '300', 'red', 'Textualizado');
    });*/
});
<!doctype html>

<html>
<script src="main.js"></script>
<head>
    <title>Eduardo Sebastián</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
</head>

<body>

</body>

</html>

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.