Entry
How can I create an XML element in a certain namespace with the DOM?
Mar 24th, 2005 05:30
Martin Honnen, http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmmthcreateNode.asp
The W3C DOM Level 1 is not namespace aware but the W3C DOM Level 2 is.
In the W3C DOM Level 2 Core you use the method createElementNS of the
XML document to create an element in a certain namespace. The first
argument to the method is the namespace URI, the second argument is the
element name (which can be a qualified name if needed):
var newElement = xmlDocument.createElementNS(
'http://example.com/2005/03/ns1',
'example-element'
);
Currently Mozilla (and Mozilla based browsers like Netscape 6/7)
implement the W3C DOM Level 2 Core method createElementNS as used above.
Opera 8.00 beta also implements that method so the above code is likely
to work in upcoming Opera 8 and later releases.
IE/Win (5 and later) has no XML DOM support of its own but makes use of
MSXML for that. MSXML however doesn't implement the W3C DOM Level 2 Core
with the method createElementNS but is nevertheless namespace aware.
With MSXML you use the method createNode of the XML document to create a
node of a certain type with a certain name in a certain namespace. To
create an element node the first argument to createNode needs to be 1,
the second argument is the element name, the third the namespace URI:
var newElement = xmlDocument.createNode(
1,
'example-element',
'http://example.com/2005/03/ns1'
);
If you want to write cross browser client-side JavaScript code that
manipulates an XML DOM document with namespaces you obviously need to
check which method, createElementNS or createNode, is supported.
Here are two examples doing that: the first example simply loads an
existing XML document (with the help of XMLHttpRequest/XMLHTTP) and then
creates an example XML element as shown above in an example namespace.
The element is then inserted in the document tree and the serialized XML
markup of the complete document is shown:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Creating XML elements in a namespace</title>
<script type="text/javascript">
function loadXMLFromURL (url, loadHandler) {
var httpRequest = null;
if (typeof XMLHttpRequest != 'undefined') {
httpRequest = new XMLHttpRequest();
}
else if (typeof ActiveXObject != 'undefined') {
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) { }
@end @*/
}
if (httpRequest != null) {
httpRequest.open('GET', url, true);
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
loadHandler(httpRequest.responseXML);
}
};
httpRequest.send(null);
}
}
function createXMLDocument (rootElementName, namespaceURI, documentType) {
var xmlDocument = null;
namespaceURI = namespaceURI || '';
documentType = documentType || null;
if (document.implementation && document.implementation.createDocument) {
xmlDocument = document.implementation.createDocument(
namespaceURI,
rootElementName,
documentType
);
}
else if (typeof ActiveXObject != 'undefined') {
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
var rootElement = xmlDocument.createNode(1, rootElementName,
namespaceURI);
xmlDocument.appendChild(rootElement);
}
catch (e) { }
@end @*/
}
return xmlDocument;
}
function createElementNS (namespaceURI, elementName, ownerDocument) {
var element = null;
if (typeof ownerDocument.createElementNS != 'undefined') {
element = ownerDocument.createElementNS(namespaceURI, elementName);
}
else if (typeof ownerDocument.createNode != 'undefined') {
element = ownerDocument.createNode(1, elementName, namespaceURI);
}
return element;
}
function serializeNode (node) {
if (typeof XMLSerializer != 'undefined') {
return new XMLSerializer().serializeToString(node);
}
else if (typeof node.xml != 'undefined') {
return node.xml;
}
else {
return '';
}
}
</script>
<script type="text/javascript">
function output (text) {
var pre = document.createElement('pre');
pre.appendChild(document.createTextNode(text));
document.body.appendChild(pre);
}
</script>
</head>
<body>
<h1>Creating XML elements in a namespace</h1>
<h2>Adding an element in an example namespace</h2>
<script type="text/javascript">
function addElementInNamespace1 (xmlDocument) {
var exampleNamespaceURI = 'http://example.com/2005/03/ns1';
var exampleElementName = 'example-element';
var newElement = createElementNS(
exampleNamespaceURI,
exampleElementName,
xmlDocument
);
if (newElement) {
newElement.appendChild(xmlDocument.createTextNode(
'Kibology for all.'));
xmlDocument.documentElement.appendChild(newElement);
output('Created element: ' + newElement + '; nodeName: ' +
newElement.nodeName +
'; namespaceURI: ' + newElement.namespaceURI);
output('Serialized document:\r\n' + serializeNode(xmlDocument));
}
}
loadXMLFromURL('test2005032401.xml', addElementInNamespace1);
</script>
</body>
</html>
The example XML document (with URL test2005032401.xml) that is loaded is
not important or relevant to the subject of the script example, creating
an element in a namespace, but could for instance look as follows:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<motto>All for Kibology.</motto>
</root>
The second script example creates a complete XHTML document from scratch
and outputs the serialized markup of the document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Creating XML elements in a namespace</title>
<script type="text/javascript">
function createXMLDocument (rootElementName, namespaceURI, documentType) {
var xmlDocument = null;
namespaceURI = namespaceURI || '';
documentType = documentType || null;
if (document.implementation && document.implementation.createDocument) {
xmlDocument = document.implementation.createDocument(
namespaceURI,
rootElementName,
documentType
);
}
else if (typeof ActiveXObject != 'undefined') {
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
var rootElement = xmlDocument.createNode(1, rootElementName,
namespaceURI);
xmlDocument.appendChild(rootElement);
}
catch (e) { }
@end @*/
}
return xmlDocument;
}
function createElementNS (namespaceURI, elementName, ownerDocument) {
var element = null;
if (typeof ownerDocument.createElementNS != 'undefined') {
element = ownerDocument.createElementNS(namespaceURI, elementName);
}
else if (typeof ownerDocument.createNode != 'undefined') {
element = ownerDocument.createNode(1, elementName, namespaceURI);
}
return element;
}
function serializeNode (node) {
if (typeof XMLSerializer != 'undefined') {
return new XMLSerializer().serializeToString(node);
}
else if (typeof node.xml != 'undefined') {
return node.xml;
}
else {
return '';
}
}
</script>
<script type="text/javascript">
function output (text) {
var pre = document.createElement('pre');
pre.appendChild(document.createTextNode(text));
document.body.appendChild(pre);
}
</script>
</head>
<body>
<h1>Creating XML elements in a namespace</h1>
<h2>Creating an XHTML document</h2>
<script type="text/javascript">
function createXHTMLDocumentExample1 () {
var xhtmlNamespaceURI = 'http://www.w3.org/1999/xhtml';
var xhtmlDocument = createXMLDocument('html', xhtmlNamespaceURI);
var head = createElementNS(xhtmlNamespaceURI, 'head', xhtmlDocument);
var title = createElementNS(xhtmlNamespaceURI, 'title', xhtmlDocument);
title.appendChild(xhtmlDocument.createTextNode('Example XHTML document'));
head.appendChild(title);
xhtmlDocument.documentElement.appendChild(head);
var body = createElementNS(xhtmlNamespaceURI, 'body', xhtmlDocument);
var h1 = createElementNS(xhtmlNamespaceURI, 'h1', xhtmlDocument);
h1.appendChild(xhtmlDocument.createTextNode('Example XHTML document'));
body.appendChild(h1);
xhtmlDocument.documentElement.appendChild(body);
output('Serialized document:\r\n' + serializeNode(xhtmlDocument));
}
createXHTMLDocumentExample1();
</script>
</body>
</html>
