creating html document dynamically

Question

<!DOCTYPE>
<html>
<script>
    var btn = document.createElement("BUTTON");
    var txt = document.createTextNode("Text");
    btn.appendChild(txt);
    document.body.appendChild(btn);
</script>
</html>

I just started learning HTML and JavaScript.

I was expecting the above code to output a button with a word "text" in it. Unfortunately, the output was blank. Can someone explain to me why this code didn't work?

The javascript is trying to run before the page has loaded causing it to error. You should also have a body tag but that isn't the reason your button isn't being created. This does work without the body tag but i wouldn't recommend doing that. — NewToJS, Apr 17 '15 at 02:21
Yeah your right! Theres an error: Uncaught TypeError: Cannot read property 'appendChild' of null — Ethyl Casin, Apr 17 '15 at 02:24

score 3 · Accepted Answer · answered Apr 17 '15 at 02:24

3

your script won't do anything because it in head so your script run before body you need use window.onload function like this

<!DOCTYPE>
<html>
<script>
window.onload = function(){
    var btn = document.createElement("BUTTON");
    var txt = document.createTextNode("Text");
    btn.appendChild(txt);
    document.body.appendChild(btn);
}
</script>
</html>

answered Apr 17 '15 at 02:24

Will this append to the body even if there is no `` to append to? – Sumner Evans Apr 17 '15 at 02:26
Yes, it will append. I have tried this with and without the body tag. Not that i would recommend doing this without the body tag. The issue is the javascript running before the page is read. – NewToJS Apr 17 '15 at 02:27
look at that http://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags – Apr 17 '15 at 02:29
@ethylcasin - IMO, a better solution would be to just move the ` – jfriend00 Apr 17 '15 at 02:54
yes , but she want it in head , whatever it works :) – Apr 17 '15 at 02:58

score 1 · Answer 2 · answered Apr 17 '15 at 02:22

jsve is close. You need to make sure the code isloaded when the body loads. This is done by calling the body's onload function, like this...

<!doctype html>
<html>
<head>
    <script>
    function init(){
        var btn = document.createElement("BUTTON");
        var txt = document.createTextNode("Text");
        btn.appendChild(txt);
        document.body.appendChild(btn);
    }
    </script>
</head>
<body onload="init()"></body>
</html>

Sumner Evans · Answer 3 · 2015-04-17T02:22:02.877

0

You need to run that code after the body is loaded:

<!doctype html>
<html>
<head>
    <script>
        function addBtn() {
            var btn = document.createElement("button");
            var txt = document.createTextNode("Text");
            btn.appendChild(txt);
            document.body.appendChild(btn);
        }
    </script>
</head>
<body onload="addBtn()"></body>
</html>

A few more comments:

You also need to update your DOCTYPE to <!doctype html> as I show above.
Wrap your <script> tag inside of a <head> tag.
No need to capitalize button.

edited Apr 17 '15 at 02:22

answered Apr 17 '15 at 02:19

Sumner Evans

8,951
5
30
47

This won't work because the javascript is running before the page is read. Try `window.onload=function(){*place the javascript here*}` – NewToJS Apr 17 '15 at 02:24
@jsve I see it. I have also given another method in the comment. – NewToJS Apr 17 '15 at 02:26

creating html document dynamically

3 Answers3