JavaScript通过ID获取元素

Question

My HTML includes the code:

<div id="msg"></div>

In its body.

In the head section I then have:

var msg = document.getElementByID("msg");

But when I then call within a function:

msg.innerHTML = "test";

It returns an error stating that msg is null. What should I do?

Answer 1

Firstly, you have to consider that JavaScript is case sensitive language, so you should use getElementById (note case of last letter). Next, if you get element by id, you should pass ID as an argument (not a tag name):

var msg = document.getElementById("msg");

You can read more information about this method in MDN :

• https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

Also, one important note is to use this code when the markup is fully loaded, ie when your msg element is "visible" for JavaScript. In order to achieve this, one option is to put your <script> tag (with corresponding JavaScript code) to the end of HTML right before </body> .

Answer 2

In the head section I then have:

 var msg = document.getElementByID("div"); 

Three issues there:

1. If that code is in head , but the element is defined in body , the element doesn't exist yet when the code is run.

2. The element's id is "msg" , not div . div is its tag name, and isn't unique.

3. It's getElementById , not getElementByID .

If you move your script element containing the code to just before the closing </body> tag on your page, and use document.getElementById("msg") , you should be fine.

Answer 3

Because you are calling it before the page has loaded the element. You need to wait for document ready or window.onload to reference the element.