解析中、jQueryはテーブルではないものを無視し、ドキュメントはテーブルタグを削除します

Question

これはバグか機能かわかりません。 htmlを表の外部の表要素で解析すると、jQueryは表以外の要素を無視します。 element.innerHTML = htmlはここ

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

になったjavascriptの平野に同じHTMLを渡すとき$(html)に渡さ

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

は

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

になり、それはhttps://codepen.io/addbrick/pen/mprBgP

EDITアクションである：右掲示した後、私はこれを実現しましたjQueryはdomの逆の動作のためにテーブル要素を削除しています。

Answer 1

これは有効な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を直接テーブル内の要素として使用しないでください。 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ノードに提供された文字列を直接解釈し、それらをドキュメントに追加します。

要素のすべての子を削除し、内容文字列を解析し、結果のノードを要素の子として割り当てます。