Problems adding a new element to the DOM?

Question

Trying to add a new element to the DOM but I get all sorts of errors depending on what I try to do.

<html>
<head>
    <script>
        var newElement = document.createElement("pre");
        var newText = document.createTextNode("Contents of the element");
        newElement.appendChild(newText);
        document.getElementsByTag("body").appendChild(newElement);
    </script>
</head>
<body>
    <p>Welcome</p>
</body>

</html>

score 3 · Accepted Answer · answered May 04 '12 at 12:23

The script is in the <head> and your code runs immediately (it is not a delayed function call). The <body> does not exist when you try to run it.

Move the script to just before </body> or move it into a function and call it onload.

getElementsByTag is not a method on the document object. You probably mean getElementsByTagName but that returns a NodeList, not an HTMLElementNode. This is like an array. You need to pull the first item off it, or better:

Use document.body

score 0 · Answer 2 · answered May 04 '12 at 12:26

Here is what you want:

   <html>
    <head>
        <script>
            var newElement = document.createElement("pre");
            var newText = document.createTextNode("Contents of the element");
            newElement.appendChild(newText);
            document.body.appendChild(newElement);
        </script>
    </head>
    <body>
        <p>Welcome</p>
    </body>

and here is JSFiddle Demo

score 0 · Answer 3 · answered May 04 '12 at 12:28

Try with this new Fiddle: http://jsfiddle.net/pRVAd/1/

<html>
<head>
    <script>
        function doTheThing() {
            var newElement = document.createElement("pre");
            var newText = document.createTextNode("Contents of the element");
            newElement.appendChild(newText);
            document.getElementsByTagName("body")[0].appendChild(newElement);
        }
    </script>
</head>
<body>
    <input type="button" value="Do The Thing" onclick="doTheThing()">    
    <p>Welcome</p>
</body>

<html>

The correct sintax is: document.getElementsByTagName("TagName")[index]

score 0 · Answer 4 · edited May 23 '17 at 11:48

<html>
<head>
  <script>
    // This function will be executed once that the DOM tree is finalized
    // (the page has finished loading)
    window.onload = function() {
      var newElement = document.createElement("pre");
      var newText = document.createTextNode("Contents of the element");
      newElement.appendChild(newText);
      // You have to use document.body instead of document.getElementsByTag("body")
      document.body.appendChild(newElement);  
    }
  </script>
</head>
<body>
  <p>Welcome</p>
</body>
</html>

window.onload and how to use it correctly.

document.body

Problems adding a new element to the DOM?

4 Answers4