Web Design in a Nutshell, 3rd Edition

createElement( )

As you’d expect, the createElement( ) method (which is used on the document object) creates and returns a new element. To build a div for example, do the following:

var new_div = document.createElement( 'div' );

This assigns your newly created element to the variable new_div. To actually see the newly created div on the page, we should probably put some content in it.

name and Element Creation in IE

Internet Explorer has a few DOM-related peculiarities, some of which we’ve already discussed. This one is particularly odd, however. In IE, elements that are generated through the DOM are incapable of being assigned a name attribute in any standard way. The following example should work (it does in all other browsers):

var input = document.createElement( 'input' );
input.setAttribute( 'name', 'fname' );

You might think that this is another special case like that of class or for, but the following HTML DOM method doesn’t work either:

input.name = 'fname';

This is not normally a problem unless you are working with forms. If you are planning to use a generated form field to collect a response that will be used only by JavaScript, you should be fine as you can address a field by giving it an id. On the other hand, if you are planning on the form being submitted to the server, the value for the generated field will not go with it as it has no name to associate with the value.

The solution? A bastardization of the createElement( ) method that only works in IE:

var input = document.createElement( ...