解析时,jQuery会忽略任何不是表的内容,而文档会删除表标记

Question

不确定这是一个错误还是一个功能.在使用表外的表元素解析html时,jQuery会忽略非表元素.

<tr><td>table data</td></tr>
<div>div after will be ignored</div>

传入$(html)成为

<tr><td>table data</td></tr>

当传递相同的HTML进入普通的JavaScript element.innerHTML = html变成

table data
<div>div after will be ignored</div>

这是在行动https://codepen.io/addbrick/pen/mprBgP

编辑:发布后,我发现jQuery正在删除表元素,因为dom中的相反行为.

Answer 1

首先，\xe2\x80\x99 不是有效的 HTML。

\n\n

是的。Jquery 解析器会清理它。

\n\n

如果您仔细查看jquery源代码，就会发现 html 函数在实际设置innerHTML.

\n\n

parseHTML 正在调用 buildFragment 并删除字符串内的所有虚假元素。

\n\n

以下是buildFragment函数的部分源代码

\n\n

// Add nodes directly\n            if ( jQuery.type( elem ) === "object" ) {\n                jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );\n\n            // Convert non-html into a text node\n            } else if ( !rhtml.test( elem ) ) {\n                nodes.push( context.createTextNode( elem ) );\n\n            // Convert html into DOM nodes\n            } else {\n                tmp = tmp || safe.appendChild( context.createElement( "div" ) );\n\n                // Deserialize a standard representation\n                tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();\n                wrap = wrapMap[ tag ] || wrapMap._default;\n\n                tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];\n\n                // Descend through wrappers to the right content\n                j = wrap[ 0 ];\n                while ( j-- ) {\n                    tmp = tmp.lastChild;\n                }\n\n\n\n// Manually add leading whitespace removed by IE\n            if ( !support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {\n                nodes.push( context.createTextNode( rleadingWhitespace.exec( elem )[ 0 ] ) );\n            }\n\n            // Remove IE\'s autoinserted <tbody> from table fragments\n            if ( !support.tbody ) {\n\n                // String was a <table>, *may* have spurious <tbody>\n                elem = tag === "table" && !rtbody.test( elem ) ?\n                    tmp.firstChild :\n\n                    // String was a bare <thead> or <tfoot>\n                    wrap[ 1 ] === "<table>" && !rtbody.test( elem ) ?\n                        tmp :\n                        0;\n

\n\n

是的，这就是您实际传递的字符串被评估并创建 DOM 节点的地方。

\n\n

最后，div 不应该直接用作表格内的元素。可以包裹在tdand内tr。

\n\n

那么为什么 jquery 会忽略它呢？因为那不是真实有效的 html。如果仔细查看Table 的 html 规范，您只能拥有给定的标签。在表标签中，

\n\n

<!ELEMENT TABLE - -\n     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>\n<!ATTLIST TABLE                        -- table element --\n  %attrs;                              -- %coreattrs, %i18n, %events --\n  summary     %Text;         #IMPLIED  -- purpose/structure for speech output--\n  width       %Length;       #IMPLIED  -- table width --\n  border      %Pixels;       #IMPLIED  -- controls frame width around table --\n  frame       %TFrame;       #IMPLIED  -- which parts of frame to render --\n  rules       %TRules;       #IMPLIED  -- rulings between rows and cols --\n  cellspacing %Length;       #IMPLIED  -- spacing between cells --\n  cellpadding %Length;       #IMPLIED  -- spacing within cells --\n  >\n

\n\n

在每个标签内

\n\n

<!ELEMENT THEAD    - O (TR)+           -- table header -->\n<!ELEMENT TFOOT    - O (TR)+           -- table footer --> \n

\n\n

正如你所看到的，没有直接允许使用div标签。

\n\n

然而，在普通 javascript 的情况下innerHTML，不会发生这样的解析，浏览器直接解释提供给 dom 节点的字符串并将它们添加到文档中。

\n\n

\n

删除所有元素的子元素，解析内容字符串并将结果节点分配为元素的子元素。

\n

\n