para - send email javascript example
Error de Javascript: no se puede llamar al método ''appendChild'' de nulo (6)
Añado un detector de eventos para esperar a que el contenido DOM se cargue por completo.
document.addEventListener("DOMContentLoaded", function() {
place_the_code_you_want_to_run_after_page_load
})
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 este es un error muy básico, pero miré a mi alrededor y no pude encontrar una respuesta.
Estoy tratando de usar el método appendChild para agregar un encabezado y un texto de párrafo 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>
Aquí está 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);
Ejecutarlo causa un error: "No se puede llamar al método ''appendChild'' de nulo"
¿Ayuda? No puedo entender por qué esto no está funcionando ...
Debido a que su archivo JavaScript se carga primero, y en ese momento cuando escribe window.document.body.appendChild(btn) , body elemento body no se carga en html, por eso está recibiendo un error aquí, puede cargar el archivo js una vez que el elemento body Se carga 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);
}
Hay una manera más fácil de resolver este problema. Ponga 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.
Su DOM no está cargado, por lo que getElementById devolverá nulo, use 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);
}
Su script se está ejecutando antes de que los elementos estén disponibles.
Coloque su script 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>
Suponiendo que este código está dentro del archivo script.js , esto se debe a que el javascript se está ejecutando antes de que se cargue el resto de la página HTML.
Cuando se carga una página HTML, cuando se encuentra con 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. Entonces, su código se está ejecutando antes de que se cargue <div> en la página.
Mueva su etiqueta <script> a la parte inferior de la página y ya no debería tener el error. Alternativamente, introduzca un evento como <body onload="doSomething();"> y luego doSomething() un método doSomething() en su archivo javascript que ejecutará esas declaraciones.