为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery?
Posted
技术标签:
【中文标题】为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery?【英文标题】:Why does the following way of creating DOM elements not work with jQuery in IE7 and IE8?为什么以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery? 【发布时间】:2011-11-13 14:35:00 【问题描述】:有时,将 DOM 元素创建为 jQuery 对象以用作选择器和上下文很有用。
以下内容适用于两者 IE7、IE8 和所有其他使用 jQuery 1.6.2/3 的浏览器 - 但请注意 document.createElement
用于使这项工作在 IE7 和 IE8 中运行。
jQuery('body').append('<div id="basic-render-test"> </div>');
var new_object = ;
new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';
//alert(typeof new_object.wrapper);
if (jQuery.browser.msie && jQuery.browser.version <= 8.0)
new_object.el = document.createElement(new_object.wrapper);
else
new_object.el = jQuery(new_object.wrapper);
new_object.render_into = "#basic-render-test";
jQuery(new_object.render_into).append( new_object.el );
some_html = '<DIV id="type-m" class="translate"> HELLO IE</DIV>';
jQuery(new_object.el).html( some_html );
声明的 DOM 类型是 HTML 5
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
【问题讨论】:
【参考方案1】:您需要提供一个实际有效的 html 代码才能正确创建它。在您的示例中,您的 span 标签未关闭,这导致在 IE 中评估时代码无效,而其他浏览器倾向于自动修复它。
替换
new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';
有
new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';
This exemple 在 IE 7 和 8 上都能完美运行
【讨论】:
此作品在 IE8 中将 "" 更改为 "" 效果很好(未在 IE7 中测试过) jQuery 文档api.jquery.com/jQuery/#jQuery2 中提到:“为了确保跨平台兼容性,sn-p 必须格式正确。可以包含其他元素的标签应与结束标签配对” 【参考方案2】:在查看 jQuery 代码时,如果您传递给 jQuery 函数的是一个简单的标签,例如 "<span>"
与您传递的内容,它会采用不同的代码路径。当它是一个简单的标签时,jQuery 调用createElement() on it, pretty much like your workaround code
。当它不是一个简单的标签时,jQuery 会调用createDocumentFragment()
,然后采用更复杂的路径,包括临时 div、将您的 HTML 设置为 innerHTML 等...
如果你让你的 HTML 成为一个简单的标签,然后在对象创建后添加 id 属性,它应该遵循 createElement 代码路径。
要解决此问题,请更改以下内容:
new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';
到这里:
new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';
来自this jQuery documentation:
为确保跨平台兼容性,sn-p 必须是 格式良好。可以包含其他元素的标签应该配对 带有结束标记。
您的 HTML 未与结束标记配对。
【讨论】:
以上是关于为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery?的主要内容,如果未能解决你的问题,请参考以下文章
可拖动的 jQuery UI 不适用于新创建的 DOM 元素