jQuery为图像标签创建了不正确的元素

Question

我一直在使用 jQuery 创建 HTML 元素，然后将它们添加到 XML 文档中，如下所示：

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);

这是输出（在 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. 不幸的是，我遇到了两个问题。

1. 当我尝试创建一个名称为child 的元素时，它正确地创建了一个标签名称为child 的元素。但是，如果我使用名称 image，由于某种原因 jQuery 认为我想创建一个 img 元素。如何阻止 jQuery 这样做？

2. 所有子元素都会自动添加属性xmlns="http://www.w3.org/1999/xhtml"，即使我生成的文档不是XHTML 文档。我该如何阻止这种情况发生？

更新：

图像 tagName 问题似乎是 DOM 的问题，而不是 jQuery，正如this code 所展示的那样：

var el = document.createElement("image");
$("#output").append(el.tagName); // Outputs "IMG"

Answer 1

image 是 img 的同义词。 document.createElement('image') 实际上创建了一个 img 元素，就像我在 this question 中解释的那样。

不过，所有的希望都没有消失。当您将 HTML/XML 字符串传递给 jQuery、the second argument is the owner document 时，要解析的元素。

由于您在第一步中已经创建了一个 XML 文档对象，我相信

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

将使用 XML 文档的createElement 方法并创建正确的元素。

注意：在内部，jQuery uses jQuery.parseHTML when passed such a string，因此此方法可能并不总是有效。看起来 jQuery 始终使用传入的文档（上下文）。它当然应该适用于单个标签。

更安全（也许更容易？）可能只是使用：

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