不确定这是错误还是功能。当使用表外的表元素解析 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 中的行为相反。

最佳答案

首先，这不是有效的 HTML。

是的。 Jquery 解析器清理那个。

如果您仔细查看 source code jquery, html 函数在实际设置 innerHTML 之前使用 parseHTML。

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

下面是buildFragment函数的部分源码

// Add nodes directly
            if ( jQuery.type( elem ) === "object" ) {
                jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );

            // Convert non-html into a text node
            } else if ( !rhtml.test( elem ) ) {
                nodes.push( context.createTextNode( elem ) );

            // Convert html into DOM nodes
            } else {
                tmp = tmp || safe.appendChild( context.createElement( "div" ) );

                // Deserialize a standard representation
                tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();
                wrap = wrapMap[ tag ] || wrapMap._default;

                tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

                // Descend through wrappers to the right content
                j = wrap[ 0 ];
                while ( j-- ) {
                    tmp = tmp.lastChild;
                }



// Manually add leading whitespace removed by IE
            if ( !support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
                nodes.push( context.createTextNode( rleadingWhitespace.exec( elem )[ 0 ] ) );
            }

            // Remove IE's autoinserted <tbody> from table fragments
            if ( !support.tbody ) {

                // String was a <table>, *may* have spurious <tbody>
                elem = tag === "table" && !rtbody.test( elem ) ?
                    tmp.firstChild :

                    // String was a bare <thead> or <tfoot>
                    wrap[ 1 ] === "<table>" && !rtbody.test( elem ) ?
                        tmp :
                        0;

是的，那是你实际传递的字符串被评估和创建 DOM 节点的地方。

最后，div 不应该直接用于表格中的 a 元素。可以包裹在 td 和 tr 中。

那么为什么 jquery 忽略了它呢？因为那不是真实有效的 html。如果你仔细观察 html specification of Table , 你只能有给定的标签。在表格标签中，

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

在每个标签内

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

如您所见，不允许直接使用 div 标签。

然而，如果是 vanilla javascript innerHTML ，没有这样的解析发生，浏览器直接解释提供给 dom 节点的字符串并将它们添加到文档中。

Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.

关于javascript - 解析时，jQuery 会忽略任何不是表格的内容，文档会删除表格标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47937173/