XHTML DOM操作与jQuery

我使用Firefox 3.5。我的doctype是XHTML 1.0 Strict。假设我想插入一个图像到ID为“foo”的div中;那么我可以尝试：XHTML DOM操作与jQuery

var foo = $('#foo'); 
foo.html('<img src="bar.gif" />');

这确实会添加图像。但我注意到，这在文档的后面引起了一些奇怪的行为，我怀疑这可能是由于XHTML的破坏。果然，使用Firefox的Web开发工具，我查了生成的源代码，并震惊地发现脚本运行后，我有：

<div id="foo"><img src="bar.gif"></div>

凡img标签做了结尾的斜线去！？搜索周围，我发现这不是一个jQuery特定的问题：纯JavaScript代码

document.getElementById('foo').innerHTML = '<img src="bar.gif" />';

产生相同的结果。所以我该怎么做？我应该注意使用扩展表格

<img src="bar.gif"></img>

不影响结果。如何使用JavaScript将严格有效的XHTML插入到我的文档中？

来源

2009-08-03 Trevor Burnham

原来，我观察到的奇怪行为是无关的。但是lhnz对于MIME类型是绝对正确的。事实证明，当使用text/html时，Firefox在内部剥离了不必要的结束斜线，因此Web Developer显示的生成源反映了这一点。故事的道德：将application/xhtml + xml提供给支持它的浏览器，并将text/xhtml提供给其他人。 – 2009-08-04 16:16:50

这是一个在黑暗中拍摄的一点点，我不知道这是否是原因，但你确定你所服务的XHTML，而不仅仅是标准的HTML与XHTMLs语法。那就是：文档的MIME类型是默认文本/ html还是application/xhtml + xml？

我最近阅读了下面的文章，如果文档实际上并未被浏览器当作XML处理，那么您遇到的问题对我来说会非常有意义（因此它将删除错误的XHTML样式斜杠符合MIME类型）...

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

只是一个想法。

来源

2009-08-03 23:49:00 olive

完全正确！我以为我是作为application/xhtml + xml服务我的页面，但实际上只是text/html。使开关导致生成的代码包含尾部斜线。谢谢！ – 2009-08-04 16:08:57

试试这个：

var image = document.createElement('img'); 
image.setAttribute('src', 'bar.gif'); 
foo.appendChild(image);

来源

2009-08-03 20:57:48

我相信这只是一个更详细的做同样的事情。 – 2009-08-04 16:13:46

我创建了一个小测试，

代码：

$('input.clone').live('click', function(){ 

    var img = $('<img/>').attr({src : 'http://www.bennadel.com/resources/uploads/jquery_gradient_example_no_gradient.jpg'}); 
    $('#target').append(img); 

});

HTML：

<div id="target"> test </div> 
<input type="button" class="clone" id="btnClone" value="clone"/>

you can see the small demo here

and here is the full code @ pastebin

来源

2009-08-03 21:06:15 Sander

该技术不会影响结果。根据Web Developer扩展，img标签在生成的源代码中仍未关闭。 – 2009-08-04 15:45:21

试图逃避你的斜线......这是可能的，它不是把它，因为它是没有逃脱：

$('#foo').html('<img src="bar.gif" \/>');

还，如果你正在写的是你需要包括alt文字XHTML不要忘记:)

来源

2009-08-04 00:50:31 Jason

你对alt属性是正确的，但我不认为正斜线在这种情况下需要转义。 – 2009-08-04 16:12:06

XHTML DOM操作与jQuery

回答

相关问题