JQuery creates the wrong element for image tag

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); // Outputs "IMG"
+5
1

image img. document.createElement('image') img, .

, . HTML/XML jQuery, , .

XML , ,

var imageEl = $("<image />", doc[0]);

createElement XML .

: , jQuery jQuery.parseHTML , . , jQuery (). , , .

(, , ?) :

var imgeEl = $(doc[0].createElement('image'));
+4

All Articles