Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
138
rated 0 times [  140] [ 2]  / answers: 1 / hits: 102080  / 13 Years ago, thu, december 29, 2011, 12:00:00

I am new to Javascript (and programming in general) and have been trying to get a basic grasp on working with the DOM. Apologies if this is a very basic mistake, but I looked around and couldn't find an answer.



I am trying to use the appendChild method to add a heading and some paragraph text into the in the very basic HTML file below.



    <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>


Here is the js code:



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);


Running it causes an error: Cannot call method 'appendChild' of null



Help? I can't figure out why this isn't working...


More From » javascript

 Answers
7

Assuming this code is inside the script.js file, this is because the javascript is running before the rest of the HTML page has loaded.



When an HTML page loads, when it comes across a linked resource such as a javascript file, it loads that resource, executes all code it can, and then continues running the page. So your code is running before the <div> is loaded on the page.



Move your <script> tag to the bottom of the page and you should no longer have the error. Alternatively, introduce an event such as <body onload=doSomething();> and then make a doSomething() method in your javascript file which will run those statements.


[#88325] Tuesday, December 27, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
magaly

Total Points: 524
Total Questions: 96
Total Answers: 89

Location: India
Member since Wed, Aug 26, 2020
4 Years ago
magaly questions
Wed, May 5, 21, 00:00, 3 Years ago
Sun, Nov 8, 20, 00:00, 4 Years ago
Mon, Oct 21, 19, 00:00, 5 Years ago
Mon, Jul 15, 19, 00:00, 5 Years ago
;