I use jQuery to create HTML elements and then add them to an XML document, for example:
var doc = $($.parseXML('<?xml version="1.0" encoding="UTF-8"?><root/>'));
var docRoot = doc.find("root");
var childEl = $("<child>");
docRoot.append(childEl);
var imageEl = $("<image>");
docRoot.append(imageEl);
var xmlString = doc.context.xml ||
new XMLSerializer().serializeToString(doc.context);
$("#xml").text(xmlString);
This is the result (in Chrome 24):
<?xml version="1.0" encoding="UTF-8"?>
<root>
<child xmlns="http://www.w3.org/1999/xhtml"></child>
<img xmlns="http://www.w3.org/1999/xhtml" />
</root>
Here's the JSFiddle link. Unfortunately, I have two problems.
When I try to create an element with a type name child, it correctly creates an element with tagName child. However, if I use the name image, for some reason jQuery thinks I want to create an element img. How to stop jQuery from doing this?
All child elements automatically add an attribute xmlns="http://www.w3.org/1999/xhtml", even if the document I created is not an XHTML document. How to stop this?
Update:
tagName DOM, jQuery, :
var el = document.createElement("image");
$("#output").append(el.tagName);