DOM manipulation using javascript

Asked Jun 25 '20 at 09:40

Active Jun 25 '20 at 09:40

Viewed 23 times

I have been trying to replace the innerHTML of an elemnent in Javascript using document.getElementbyId(id), but for some reason i get null. Here's the html file:

<body id="main">
    <p>Hello World!</p>
  </body>

And here's the JavaScript:

var b = document.getElementById("main");
b.innerHTML = "World Hello!";

And here's the error:

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at about.js:2

NOTE: the name of js file is about.js, which i have referenced to the html file

asked Jun 25 '20 at 09:40

astroanax

3

Is your JS code put at the end of page or in header? Maybe DOM is not loaded yet, but JS already fired? – Justinas Jun 25 '20 at 09:43
getElementById is a function of document object (so it simply doesn't exist in document body. Use document.body instead – demkovych Jun 25 '20 at 09:43
1

@demkovych Say what now? – deceze Jun 25 '20 at 09:44
1

Your javascript needs to run after the body is fully loaded or it won't find the element. So use something like jquery and wait for document ready – joshstrike Jun 25 '20 at 09:44
1

Side note: You don't have to assign an `id` to the `body` element to access it. It's available as `document.body` once it exists. – T.J. Crowder Jun 25 '20 at 09:45
Thanks, everyone! problem fixed by using `defer`! – astroanax Jun 25 '20 at 09:45
1

@joshstrike You can wait for the document to load just fine without needing to involve jQuery. – deceze Jun 25 '20 at 09:47
1

@TJ kind of you to assume it's the only body tag he's targeting for rewrite :) – joshstrike Jun 25 '20 at 09:48
@deceze yeah.. I forgot. .onready()? I've just been on autopilot with $(document).ready for a decade. – joshstrike Jun 25 '20 at 09:52

DOM manipulation using javascript

0 Answers0