Error de Javascript - no se puede llamar al método 'appendChild' null

Soy nuevo en Javascript (y en la programación en general) y he estado tratando de obtener una comprensión básica sobre cómo trabajar con el DOM. Disculpas si se trata de un error muy básico, pero miré a mi alrededor y no pude encontrar una respuesta.Error de Javascript - no se puede llamar al método 'appendChild' null

Estoy tratando de usar el método appendChild para agregar un encabezado y texto de algunos párrafos en el archivo HTML muy básico a continuación.

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <script src="script.js"></script> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 
</body> 
</html>

Este es el código JS:

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph);

Correr provoca un error: "No se puede llamar al método 'appendChild' de null"

Ayuda? No puedo entender por qué esto no funciona ...

Fuente

2011-12-29 Ben

Suponiendo que el código es el interior del archivo script.js, esto se debe a que el código JavaScript se ejecuta antes que el resto de la página HTML se ha cargado.

Cuando se carga una página HTML, cuando se trata de un recurso vinculado como un archivo javascript, carga ese recurso, ejecuta todo el código que puede y luego continúa ejecutando la página. Por lo tanto, su código se está ejecutando antes de que el <div> se cargue en la página.

Mueva su etiqueta <script> al final de la página y ya no tendrá el error. Alternativamente, introduzca un evento como <body onload="doSomething();"> y luego haga un método doSomething() en su archivo javascript que ejecutará esas declaraciones.

Fuente

2011-12-29 16:38:44 Tejs

Su script se está ejecutando antes de que los elementos estén disponibles.

Coloque su secuencia de comandos directamente antes de la etiqueta de cierre </body>.

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 

    <!-- Now it will run after the above elements have been created --> 
    <script src="script.js"></script> 
</body> 
</html>

Fuente

2011-12-29 16:37:13

Existe una manera más fácil de resolver este problema. Coloque su JavaScript dentro de una función y use window.onload. Así por ejemplo:

window.onload = function any_function_name() 
{ 

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph); 
}

Ahora, no tiene que mover su etiqueta porque eso ejecutará su código después de que el HTML se haya cargado.

Fuente

2014-02-27 21:40:32 Brendan

que añadir un detector de eventos que esperar a que el contenido de DOM para cargar totalmente

document.addEventListener("DOMContentLoaded", function() { 
    place_the_code_you_want_to_run_after_page_load 
})

Fuente

2016-09-16 03:19:14

Su DOM no está cargado, por lo getElemenById devolverá un valor nulo, utilice document.ready() en jQuery

$(document).ready(function(){ 

    var newHeading = document.createElement("h1"); 
    var newParagraph = document.createElement("p"); 

    newHeading.innerHTML = "New Heading!"; 
    newParagraph.innerHTML = "Some text for a paragraph."; 

    document.getElementById("javascript").appendChild(newHeading); 
    document.getElementById("javascript").appendChild(newParagraph); 

    }

Fuente

2017-05-09 09:10:13

Como su archivo JavaScript se carga primero, y cuando escribe window.document.body.appendChild(btn), body elemento no está cargado en html, es por eso que Si recibe un error aquí, puede cargar el archivo js una vez que el elemento del cuerpo esté cargado en DOM.

index.html

<html> 
    <head> 
     <script src="JavaScript.js"></script>  
    </head> 
    <body onload="init()"> 
      <h3> button will come here</h3> 
    </body> 
</html>

JavaScript.js

function init(){ 

    var button = window.document.createElement("button"); 

    var textNode = window.document.createTextNode("click me"); 

    button.appendChild(textNode); 

    window.document.body.appendChild(button); 

    }

Fuente

2017-06-06 06:45:09

Error de Javascript - no se puede llamar al método 'appendChild' null

Respuesta

Cuestiones relacionadas