Using document.createElement() to test for browser support for an element

Cross browser scripting is becoming an ever more convoluted game of features versus support. Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser recognizes a particular HTML element, such as HTML 5's canvas or element. This is where document.createElement() can be very helpful.

To test for support for an element, the basic premise is this:

• Use document.createElement() to dynamically create the element as if the browser supports it.
• Check the newly created object for a known property or JavaScript method that should exist if the browser actually supports this element.
• For INPUT elements, set its TYPE attribute to the target INPUT TYPE you're testing for, and see if the browser retains that value.

document.createElement() behaves as such that it will create an element regardless of whether the browser actually supports it. The true test on the legitimacy of this newly created element is whether or not it supports the properties and methods expected of it, and that's what we exploit here to test for browser support for an element.

  Checking for support for the canvas element of HTML 5

Lets start our parade of examples with a check for support for the canvas element of HTML 5. Standard object detection doesn't work here, since the canvas element isn't automatically represented by a JavaScript object when the page loads.

var test_canvas = document.createElement("canvas") //try and create sample canvas element

var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element

alert(canvascheck) //alerts true if browser supports canvas element

In the above, first we create a "test" canvas element, then see if it's a legitimate canvas object by checking for the getContext() method, which all canvas capable browsers should have. Canvascheck in turn returns a Boolean indicating whether the browser supports the canvas element of HTML 5.

Checking for support for the audio and video elements of HTML 5

Next up, you can also use document.createElement() to check for support for the new audio and video elements of HTML 5. Both elements once defined support a list of methods, one of which is play(). By fishing for this method in the newly created object, we can check whether the browser actually supports these two elements:

var test_audio= document.createElement("audio") //try and create sample audio element

var test_video= document.createElement("video") //try and create sample video element

var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true : false}

alert("Audio Element support: " + mediasupport.audio + "\n"

+ "Video Element support: " + mediasupport.video

)

Checking the

It's a very handy feature, but obviously one that only works in IE. To see if the browser can handle IE behaviors, first, create a "dummy"