为什么以下创建 DOM 元素的方法不能在 IE7 和 IE8 中使用 jQuery?
有时,将 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" />
Sometimes, it is useful to create DOM elements as jQuery objects for use as selectors and context.
The following works in both IE7,IE8 and all other browsers using jQuery 1.6.2/3 - but note that document.createElement
is used to make this work.in IE7 and 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 );
The declared DOM type is 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" />
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要提供实际有效的 html 代码才能正确创建。在您的示例中,您的 span 标记未关闭,这会导致 IE 中的评估代码无效,而其他浏览器往往会自动修复它。
替换
为
此示例 在 IE 7 和 8 上完美运行
You need to provide an actual valid html code for it to be created properly. In your exemple, your span tag is not closed, which result in an invalid code at evaluation in IE while other browsers tend to fix it automagically.
Replace
With
This exemple runs perfectly on both IE 7 and 8
在查看 jQuery 代码时,如果您传递给 jQuery 函数的是
""
之类的简单标记,则与您传递的内容相比,它会采用不同的代码路径。当它是一个简单标记时,jQuery 会对其调用createElement(),这与您的解决方法代码
非常相似。当它不是一个简单的标签时,jQuery 会调用createDocumentFragment()
,然后采用更复杂的路径,包括临时 div、将 HTML 设置为 innerHTML 等...如果您将 HTML 设为simple 标签,然后在创建对象后将 id 属性添加到对象,它应该遵循 createElement 代码路径。
要解决此问题,请将以下内容更改
为:
来自 此 jQuery 文档:
您的 HTML 未与结束标记配对。
In looking at the jQuery code, it takes a different code path if what you pass to the jQuery function is a simple tag like
"<span>"
vs. what you're passing. When it's a simple tag, jQuery callscreateElement() on it, pretty much like your workaround code
. When it's not a simple tag, jQuery callscreateDocumentFragment()
and then takes a lot more complicated path involving a temporary div, setting your HTML into the innerHTML, etc...If you make your HTML be a simple tag and then add the id attribute to the object after it's created, it should follow the createElement code path.
To work-around this, change this:
to this:
From this jQuery documentation:
Your HTML was not paired with a closing tag.