为什么以下创建 DOM 元素的方法不能在 IE7 和 IE8 中使用 jQuery?

发布于 2024-12-04 00:56:39 字数 1087 浏览 6 评论 0原文

有时,将 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

爱的故事 2024-12-11 00:56:39

您需要提供实际有效的 html 代码才能正确创建。在您的示例中,您的 span 标记未关闭,这会导致 IE 中的评估代码无效,而其他浏览器往往会自动修复它。

替换

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';

此示例 在 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

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';

With

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';

This exemple runs perfectly on both IE 7 and 8

最偏执的依靠 2024-12-11 00:56:39

在查看 jQuery 代码时,如果您传递给 jQuery 函数的是 "" 之类的简单标记,则与您传递的内容相比,它会采用不同的代码路径。当它是一个简单标记时,jQuery 会对其调用 createElement(),这与您的解决方法代码 非常相似。当它不是一个简单的标签时,jQuery 会调用 createDocumentFragment(),然后采用更复杂的路径,包括临时 div、将 HTML 设置为 innerHTML 等...

如果您将 HTML 设为simple 标签,然后在创建对象后将 id 属性添加到对象,它应该遵循 createElement 代码路径。

要解决此问题,请将以下内容更改

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';

为:

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';

来自 此 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 calls createElement() on it, pretty much like your workaround code. When it's not a simple tag, jQuery calls createDocumentFragment() 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:

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs">';

to this:

new_object.wrapper = '<span id="adfasdfasdfwersadfas3rs"></span>';

From this jQuery documentation:

To ensure cross-platform compatibility, the snippet must be
well-formed. Tags that can contain other elements should be paired
with a closing tag.

Your HTML was not paired with a closing tag.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文