mail us  |  mail this page

contact us
training  | 
tech stuff  | 

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

Name Description Notes
tag the HTML tag in quotes, for example, "p" = <p> (paragraph) or "div" = <div>.

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.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

web zytrax.com

Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to reddit.com

Page Features

Page comment feature Send to a friend feature print this page Decrease font size Increase font size

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS1
W3C CSS2.1

DOM Stuff

W3C DOM
W3C DOM Events
Gecko DOM
MSIE DOM

Usability/Access

usability.gov
W3C -WAI
Web Style Guide
WebAim.org

Jolly Useful

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com
DOCTYPE definitions

Our Stuff

Our DOM Pages
DOM User Guide
DOM Explorer
DOM Navigation
CSS Techniques
CSS Short Cuts
CSS overview
Oh Really!

Javascript

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 21 2015.