Tech Stuff - DOM-2 createElement

W3C Core Reference. Part of the Document Interface.

createElement Method

Creates an HTML Element of the defined type, for example, "table". The element is structural and the various attributes need to be added or in the case of say, a paragraph ("p") or "pre" a text node (created using createTextNode) is required to contain the visible text. The created element returns '1' (ELEMENT_NODE) to a nodeType and returns the HTML tag name that was used to create it to nodeName. Method of the document object and must be given scope (visibility) by appending (using appendChild to an existing (or created) element within the document(body, head, html).

Syntax

element = document.createElement(htmltag)

Related Stuff

createTextNode,appendChild

Parameters

Examples

// create a new paragraph
newpara = document.createElement("p");

// now some text
sometext = document.createTextNode("what a way to spend a life");

// add the text to the paragraph
newpara.appendChild(sometext);

// get an existing object and append them
existingobject = document.getElementById("one");
existingobject.appendChild(newpara);

The above creates an empty paragraph newpara element and some text sometext which is contained within the paragraph and then appends them (in the order shown) onto the existingobject with id='one'.

Notes:

createElement creates a single instance of the element which can only be used once.

// this code will NOT add two paragraphs with the same contents
// create a new paragraph
newpara = document.createElement("p");
// now some text
sometext = document.createTextNode("what a way to spend a life");
newpara.appendChild(sometext);
// stick the paragraph onto an existing object
obj1 = document.getElementById("one");
obj1.appendChild(newpara);
obj1.appendChild(newpara);

// this code WILL give desired results
// create a new paragraph
newpara = document.createElement("p");
// now some text
sometext = document.createTextNode("what a way to spend a life");
// append to paragraph
newpara.appendChild(sometext);
// stick the paragraph onto an existing object
obj1 = document.getElementById("one");
obj1.appendChild(newpara);
newpara = document.createElement("p");	// create new instance
sometext = document.createTextNode("what a way to spend a life");
newpara.appendChild(sometext);
obj1.appendChild(newpara);

When you create an 'a' (anchor) tag, the text which is anchored is a textnode attached as a childNode to the element and is not an attribute of the anchor.

// create a new anchor
newanchor = document.createElement("a");
// set anchor attributes e.g. href
..
// now create clickable text
sometext = document.createTextNode("click this link");
// add to the anchor
newanchor.appendChild(sometext);
// stick anchor onto an existing object
obj1 = document.getElementById("one");
obj1.appendChild(newanchor);

When you create an element it is created (createElement) as a method of the document. However, you must append it to something inside the HTML document to give it scope (visibility).

// this code does NOT work
newdiv = document.createElement("div");
// set div attributes 
newdiv.className = "x";
newdiv.id = "mine";
...
mydiv = document.getElementById("mine");	// does not find it

// this code DOES work
newdiv = document.createElement("div");
// set div attributes 
newdiv.className = "x";
newdiv.id = "mine";
// append directly to body element/node or use some other node
document.body.appendChild(newdiv);	
...
mydiv = document.getElementById("mine");	// finds it

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.