Why doesn't a simple createElement command work with JS and create an element in HTML DOM

Question

I don't know but this question might have simplest of all the answers but I am unable to understand.

I basically wanted to replicate a simple HTML code

<p></p>

using Javascript. If I simple write <p></p> in html then I get the following rendered elements:

<html><head></head><body><p></p></body></html>

I created an html file and wrote the following code in it.

<script>
    var para = document.createElement('p');
</script>

I rendered this file in the browser and found the following elements being rendered.

<html>
    <head>
        <script>
            var para = document.createElement('p');
        </script>
    </head>
    <body></body>
</html>

apparently my element is not created. My guess was I did not have any parent specified so it did not create that. Since body is a default DOM element, I then thought of getting the body dom element and append para as a child to it so I wrote the following code:

<script>
    var body = document.getElementsByTagName('body')[0];
    var para = document.createElement('p');

    body.appendChild(para);
</script>

but still I didn't get it to work. The following was rendered:

<html>
    <head>
        <script>
            var body = document.getElementsByTagName('body')[0];
            var para = document.createElement('p');

            body.appendChild(para);
        </script>
    </head>
<body>
</body>
</html>

and I got an Uncaught TypeError: Cannot read property 'appendChild' of undefined, which is telling me that variable body has a value undefined, but why is their no body element according to JS? What is the basic of DOM elements and how are they created when rendered, I need to understand the fundamentals behind this.

You are executing your script before the body exists. Try putting the script at the end of your body. Or do a check to execute the script only when the DOM is ready. — rasmeister, Mar 19 '17 at 20:46
That is true, but unpredictable unless you put a long delay. Load times will vary. I will typically use something like jQuery's .ready() or use a micro library like domReady (if I'm not using jQuery) so I can keep my script in the head portion where I find it makes more sense. — rasmeister, Mar 19 '17 at 21:15

score 1 · Answer 1 · answered Mar 19 '17 at 20:47

1

As said there is document.body to access the body but the code is executed before the body tag appear and that's the main problem. Javascript isn't executed like css in that way.

Try this:

<html>
    <head>
        
    </head>
<body>
  
  <script>
      var body = document.body;
      var para = document.createElement('p');
      para.textContent = "Hello";
      body.appendChild(para);
  </script>
</body>
</html>

answered Mar 19 '17 at 20:47

Kokod

11
3

you are defining dom elements here by adding the tags.. I purely wanted to deal with javascript. If I basically add a timedelay in script execution will it work, will the DOM elements be generated? http://stackoverflow.com/questions/8010932/how-can-i-add-a-body-element-to-an-empty-dom-document (Antoine's answer and the second comment in that) – Arpit Goyal Mar 19 '17 at 20:57
Instead of a time delay, which would be hacky, why not bind the script to the window's onload event? Or, wrap your code in a function, and call that function in the body's onload attribute. – Anish Goyal Mar 19 '17 at 21:01
I've never done something like that. I don't think the time delay will change anything. To writte html from nothing you can use document.write – Kokod Mar 19 '17 at 21:07
@AnishGoyal: I purely wanted to understand with javascript, delay works and I get the basic essence. window.onload will also work :) – Arpit Goyal Mar 19 '17 at 21:12
Arpit, that's all well and good, but bear in mind that a delay could fail if for some reason the browser takes too long to load the page. For example, if you set a 5 second delay, and the browser takes 10 seconds to load the body, you'll notice that the code will fail. For understanding it's not a big deal, but it's best to build up good practices now, as you're learning JS. – Anish Goyal Mar 19 '17 at 21:21

Why doesn't a simple createElement command work with JS and create an element in HTML DOM

1 Answers1