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>

这是JSFiddle链接.不幸的是,我有两个问题.

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

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

更新:

图像tagName问题似乎是DOM的问题,而不是jQuery,因为此代码演示:

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

Answer 1

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

尽管如此，我们并没有失去所有希望。当您将 HTML/XML 字符串传递给 时jQuery，第二个参数是要解析的元素的所有者文档。

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

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

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

注意：在内部，jQueryjQuery.parseHTML在传递这样的字符串时使用，因此此方法可能并不总是有效。看起来 jQuery 始终使用传入的文档（上下文）。它当然应该适用于单个标签。

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

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