How To Create Html In Javascript

Create HTML Elements

This lesson follows on from the previous one.

To create a new element with Javascript you use the createElement method of the document object. Like this:

var newPara = document.createElement("p");

In between the round brackets of createElement you type the HTML element you want to create. This needs to go inside of quote marks (single or double). We want to create a new paragraph using the P tag. (The HTML element is created with lowercase letters.) We've then assigned the new tag to a variable that we've called newPara.

Creating new text nodes

To add some new text with Javascript you can use the createTextNode method of the document object. Again, the text you want to add goes between quote marks:

var add_news = document.createTextNode("The latest news goes here.");

The newly created text is then placed in a variable. We've called ours add_news.

Adding the new text to your new element

To add the new text to your newly created HTML element, you can use the appendChild method:

newPara.appendChild( add_news );

Our new element went into the newPara variable. After a dot, type appendChild. In between the round brackets of appendChild type the name of your text node variable.

Next, we need to get that ID we set up in the footer:

var getFooter = document.getElementById("footer");

Inserting the new HTML into the BODY

Now that we have a new element, and a location where we want to place it, we can insert the new HTML. This is done with insertBefore:

document.body.insertBefore(newPara, getFooter);

This time after the document object reference we have body. This obviously references the BODY part of a HTML page. After a dot, we have the insertBefore method:

insertBefore( newPara, getFooter )

We have two arguments here, separated by a comma. The first argument is the new HTML element itself. The second argument is a location for the new element.

The whole of the latestnews function, then, is this:

A Javascript function to manipulate HTML elements

Try it out by creating a file called news.js. Save it in the same location as your web page. Place the Javascript function above in this new file.

When the button in the footer is clicked the web page will look like this:

Web page HTML inserted with Javascript

As you can see, the new content has been added before the footer but after the main content. If we wanted to add some new news then we'd only have to make one change to the Javascript file - amend the text between the brackets of createTextNode.

Another way to add a text node is like this:

function appendText() {

var newText = document.createTextNode("New Text");
document.getElementById("latest").appendChild( newText );

}

Here, we're only using createTextNode and appendChild. This directly references the ID with getElementById. After a dot, we can then just use appendChild, passing it the new text.

(Of course, we didn't have to use a button to get the latest news. We could have called the function with an onLoad event in the BODY tag. Or even used a hyperlink. But the techniques above do illustrate how to manipulate the HTML with Javascript.)

In the next section we'll take a look at image manipulation with Javascript.

< Manipulate HTML Elements | Javascript Image Manipulation >

Back to the Home Page