creating html by javascript DOM (realy basic question)

Question

i'm having some trouble with javascript. Somehow i can't get started (or saying i'm not getting any results) with html elements creation by javascript.

i'm not allowed to use:

document.writeln("<h1>...</h1>");

i've tried this:

document.getElementsByTagName('body').appendChild('h1');
document.getElementsByTagName('h1').innerHTML = 'teeeekst';

and this:

var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));

but my browser isn't showing any text. When i put an alert in this code block, it does show. So i know the code is being reached.

for this school assignment i need to set the entire html, which normally goes into the body, by javascript.

any small working code sample to set a h1 or a div?

my complete code:

<html>
  <head>
    <title>A boring website</title>
    <link rel="stylesheet" type="text/css" href="createDom.css"> 


    <script type="text/javascript">

    var element = document.createElement('h1');
element.innerHTML = "Since when?";

document.body.appendChild(element);


    </script>

  </head>
  <body>

 </body>
</html>

The first one will not work, the second one will if you add the element to the document. I recommend to read the MDN introduction of DOM. — Felix Kling
– Felix Kling, Commented Sep 22, 2011 at 13:53

Quentin · Accepted Answer · 2011-09-22 14:14:57Z

getElementsByTagName returns a NodeList (which is like an array of elements), not an element. You need to iterate over it, or at least pick an item from it, and access the properties of the elements inside it. (The body element is more easily referenced as document.body though.)

appendChild expects an Node, not a string.

var h1 = document.createElement('h1');
var content = document.createTextNode('text');
h1.appendChild(content);
document.body.appendChild(h1);

You also have to make sure that the code does not run before the body exists as it does in your edited question.

The simplest way to do this is to wrap it in a function that runs onload.

window.onload = function () {
    var h1 = document.createElement('h1');
    var content = document.createTextNode('text');
    h1.appendChild(content);
    document.body.appendChild(h1);
}

… but it is generally a better idea to use a library that abstracts the various robust event handling systems in browsers.

John Giotta · Accepted Answer · 2011-09-22 13:59:13Z

2

Did you append the element to document?

Much the same way you're appending text nodes to the newly created element, you must also append the element to a target element of the DOM.

So for example, if you want to append the new element to a <div id="target"> somewhere are the page, you must first get the element as target and then append.

//where you want the new element to do
var target = document.getElementById('target'); 
// create the new element
var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));
// append
target.appendChild(element);

edited Sep 22, 2011 at 13:59

answered Sep 22, 2011 at 13:51

John Giotta

17.1k7 gold badges55 silver badges83 bronze badges

10 Comments

Quentin Over a year ago

That will probably throw Error: HIERARCHY_REQUEST_ERR: DOM Exception 3. You can't append elements directly to the body.

middelpat Over a year ago

when i add this: 'document.appendChild(element);' to my second code sample it still won't work. could you write me a working smaple which for example creates an h1 tag into the body with te text: "sample h1" ?

John Giotta Over a year ago

@Quentin : Yes, I'm aware. It was a typo in my answer. I've expanded the answer as well.

John Giotta Over a year ago

@FelixKling : I didn't put in the body reference.

Quentin Over a year ago

@Felix Kling — Since I tested the original code in Chrome.

|

Mihai Iorga · Accepted Answer · 2011-09-22 13:55:31Z

1

create element, add html content and append to body

var element = document.createElement('h1');
element.innerHTML = 'teeeekst';
document.body.appendChild(element);

answered Sep 22, 2011 at 13:55

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

2 Comments

middelpat Over a year ago

to me it looks like this should also do the trick. but when i paste it in my html document and open it in the browser i'm still getting a blank page with only a title in the tab.

Mihai Iorga Over a year ago

add the javascript on the end of the page, just before </body>

Collectives™ on Stack Overflow

creating html by javascript DOM (realy basic question)

3 Answers 3

Comments

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related