createElement (W3C DOM Core method)

Spec
Version Depr. Static
DOM1 No No
Browser support (more…)
IE5.5+ FF1.5+ SA3+ OP9+
Buggy Full Full Full
Returns
Element
Throws
INVALID_CHARACTER_ERR

Example

var element = document.createElement('h1');

element.appendChild(document.createTextNode
    ('The man who mistook his wife for a hat'));

The example above creates an <h1> element, and then adds text to it.

The end result of that operation would be this HTML:

<h1>The man who mistook his wife for a hat</h1>

Arguments

tagname (DOMString) required

The tagName of the element. In XML this is case-sensitive; in HTML the name can be specified in any case, but will be converted to the canonical upper-case form of HTML tag names.

Description

Create an Element node of the specified type.

The created element can then be added to the document using Node methods such as appendChild or insertBefore.

A created element implements the Element interface as soon as it's created, so attributes can be added to it immediately, without having to append it to the document first. If the element has default attributes in this document type, those attributes are automatically created and attached to the element.

This method creates non-namespaced elements; to create a namespaced element, use the DOM 2 createElementNS method instead.

Return value

The created element node, with its nodeName set to the specified tag name, and its localName, prefix and namespaceURI set to null

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.5 2.0 3.0 1.3 2.0 3.0 9.0 9.5
Buggy Buggy Buggy Full Full Full Buggy Buggy Full Full Full

Internet Explorer in HTML supports a corrupted syntax, that allows a subtree to be created by passing serialized markup to this method, for example:

document.createElement('<p>Oh dear...</p>');

This violates the specification because it should throw a DOMException (code 5: INVALID_CHARACTER_ERR), therefore this behavior is considered a bug.

Tip: But even though it’s wrong, you might still need it

Nevertheless, given its extremely buggy support for setAttribute, this syntax may be the best way of creating certain types of elements in Internet Explorer. See setAttribute for details.

Safari 1.3 and 2 in XHTML mode or XML1, while not actually supporting this corrupted syntax in full, don't throw an exception either — they return the entire input string as the node name of what appears to be a created element reference; but they haven't actually created an element, and cannot add the data to the page.

Footnotes

1 On XHTML pages served as application/xhtml+xml.

User-contributed notes

There are no comments yet.

Related Products