为啥以下创建 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 函数的是一个简单的标签,例如 "&lt;span&gt;" 与您传递的内容,它会采用不同的代码路径。当它是一个简单的标签时,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 元素

Javascript 不适用于 ujs 新生成的 DOM 元素

附加 DOM 元素不适用于 jQuery 可选

DOM 操作不适用于 ng-view

为啥 :hover 不适用于 tr 元素?

Jquery Droppable 不适用于文件上传拖放,抛出错误:预期的 DOM 元素或视图