JavaScript Chapter 8 Javascript and HTML Elements

Javascript and HTML Elements

You can use Javascript to manipulate the HTML elements in the BODY section of your HTML. We'll look at four ways to do that:

createElement
createTextNode
appendChild
insertBefore

Suppose we wanted to add some latest news comments to a web page. The news changes all the time. So we want a quick and easy way to update the news on the page. We can do it with an external Javascript file that references an ID in the BODY of the HTML.

For this section, you can download our HTML5 web page. Click below and it will open in a new window or tab. The file is a text file, so you'll need to save it as html_elements.html rather thanhtml_elements.txt as it is now. If you're not sure how to do this then refer to the earlier page on this topic. Here's the file, though:

Download the HTML5 file

The code should look like this:

The first thing to notice when you access the code is the SCRIPT tags in the head section:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="news.js"></SCRIPT>

This is pointing to an external Javascript file called news.js. We'll get to that in a moment.
The important part in the BODY of the HTML is this part:

<FOOTER ID="footer">

This sets up an ID called footer. When the button below it is clicked, it will call a function with the name latestnews. We'll create this function in our Javascript file.
Before the button is clicked, the web page looks like this:

The script will add the news just above the footer, and after the main contents. We'll continue this lesson on the next page, Create HTML Elements.

Create HTML Elements

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:

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:

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 withgetElementById. 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.)