The Usefulness of the document.createElement()

The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article.

Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly.

This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases.

It is possible to get HTML5 tags working in IE8 and earlier version by including the document.createElement() JavaScript code in the head of the HTML document. The basic idea is that by using document.createElement(tagName) to create each of the unrecognized elements, the parser in IE then recognizes those elements and parses them correctly. The following code shows the syntax for using the document.createElement.

document.createElement(“header” ); document.createElement(“footer” );

document.createElement(“section”); document.createElement(“aside” );

document.createElement(“nav” ); document.createElement(“article”);

This script means that, in the case of IE8 and earlier versions, scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they will not be displayed so as a precaution let’s add an explicit element to our code. (The element encloses content that should be displayed when a script is not executed. This content is also displayed in browsers that do not support the SCRIPT or in browsers which are configured not to run scripts).

Our noscript code will state the following: “ Please Note: This browser does not support HTML5, some elements are simulated using JavaScript. Enable JavaScript in order to display this page. ” and when added to the document.createElement script appears as shown below.

document.createElement(“header” ); document.createElement(“footer” );

document.createElement(“section”); document.createElement(“aside” );

document.createElement(“nav” ); document.createElement(“article”);

Please Note: This browser does not support HTML5, some elements are simulated using JavaScript. Enable JavaScript in order to display this page.

It is advisable to specify any element new to HTML5 as “block” in your CSS file otherwise declare them as inline so all browsers, including IE8 and earlier versions will handle them properly as shown below:

header
,nav
,section
,article
,aside
,footer
,hgroup
{
display: block;
}

The document.createElement not only can be used to get HTML5 elements to function properly in IE8 and earlier browsers, but also as a means of checking for support of an element. To see how this is accomplished let’s check for support for the HTML5 canvas element.

Canvas provides an object that is used for drawing, rendering, and manipulating images and graphics on a document. The canvas object provides the surface on which to apply graphics and images. The actual drawing is done using the CanvasRenderingContext2D object, which provides the properties and methods that are used to create and manipulate graphics on a canvas object. Using the document.createElement() the JavaScript code would be written as follows:

var test_canvas = document.createElement(“canvas”) // canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method
alert(canvascheck) //alerts true if browser supports canvas element

In this example a “test” canvas element is created, then is checked to see if it is a lawful canvas object by checking for the getContext() method, which all canvas capable browsers have. Canvascheck in turn returns a Boolean (a binary variable, having two possible values called true and false) indicating whether the browser supports the canvas element of HTML 5. The entire program can be written as follows:

function canvascheck(){
var test_canvas = document.createElement(“canvas”)
var canvascheck=(test_canvas.getContext)? true: false //check if object supports getContext() method
if (canvascheck)
alert(“Browser supports the canvas element”)
else
alert(“Browser does not support the canvas element”)
}

This final example illustrates how to use the document.createElement to create an instance of an element with a specified tag that works only in Internet Explorer. In this example, the user will type-in the name of his or her favorite holiday. As the user clicks the button, the holiday name will be automatically added to a table list.

function addValue(a) {
var element1 = document.createElement(‘tr’);
var element2 = document.createElement(‘td’);
var text = document.createTextNode(a);
var table = document.getElementById(‘t’);
element2.appendChild(text);
element1.appendChild(element2);
table.tBodies(0).appendChild(element1);
}

Name:

Cut-and-paste this code into your text editor and try running it in Firefox then in IE to verify that it will only function in Internet Explorer 8 and earlier!