CODEWITHSUNDEEP
javascript
kutschkem
kutschkem

Reputation: 8163

Changing a div with javascript

I already fail at a seemingly basic task in javascript - changing a div's content by a script. Please help me understand where I am going wrong. Here is a minimal example that's not working for me:

<!DOCTYPE html>
<html>
    <head>
        <script>
            document.getElementById('id').innerHTML = "test";
        </script>

    </head>

    <body>
        <div id="id" >blub</div>
    </body>
</html>

Upvotes: 0

Views: 68

Answers (7)

iamalismith
iamalismith

Reputation: 1571

HTML files load starting at the top to the bottom of the html.

In your example, the javascript executes before the <body> tag exists in the DOM.

Moving the javascript to below the relevant html makes it work as you would expect.

Another option would be to keep the script inside the <head> but delay it from executing until the DOM is loaded 

window.onload = function() {
     document.getElementById('id').innerHTML = "test";
};

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <div id="id" >blub</div>

    <script>
      document.getElementById('id').innerHTML = "test";
    </script>
  </body>
</html>

Upvotes: 1

Marco Roth
Marco Roth

Reputation: 184

You have to write the Javascript after the div-Tag. First the DOM needs to be loaded and after you can change the content inside the DIV.

Place your Javascript before the closing-body Tag

Upvotes: 0

ChandrasekarG
ChandrasekarG

Reputation: 1383

Just add the script tag before closing the body. It'll work.

Upvotes: 0

TryingToImprove
TryingToImprove

Reputation: 7407

Your Dom is no not loaded.. Place your script tag at the end before

Upvotes: 0

jcubic
jcubic

Reputation: 66650

You need to use window.onload to call your code when html is fully loaded:

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function() {
                document.getElementById('id').innerHTML = "test";
            };
        </script>

    </head>

    <body>
        <div id="id" >blub</div>
    </body>
</html>

Upvotes: 0

harry
harry

Reputation: 448

<!DOCTYPE html>
 <html>
   <head>


   </head>

    <body>
       <div id="id" >blub</div>
       <script>
          document.getElementById('id').innerHTML = "test";
      </script>
   </body>
 </html>

put your script after the div.

Upvotes: 1

Lukas Go&#223;mann
Lukas Go&#223;mann

Reputation: 118

The Problem with you code it that the JavaScript code is executed before the div part is loaded fully. To fix this change you code to:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function changeDiv()
            {
                document.getElementById('id').innerHTML = "test";
            }
        </script>

    </head>

    <body onload="changeDiv();">
        <div id="id" >blub</div>
    </body>
</html>

The onload event will only fire when the html is fully loaded.

Upvotes: 2

Related Questions