구문 분석 할 때 jQuery는 테이블이 아닌 모든 것을 무시하고 문서가 테이블 태그를 제거합니다.

Question

버그 또는 기능인지 확실하지 않습니다. html을 테이블 외부의 테이블 요소로 구문 분석 할 때 jQuery는 테이블이 아닌 요소를 무시합니다. element.innerHTML = html 여기

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

이되는 자바 스크립트 일반에 동일한 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

편집 작업에 : 오른쪽 게시 후 나는 깨달았다. jQuery는 dom에서 반대되는 동작 때문에 테이블 요소를 제거합니다.

Answer 1

시작하려면 유효하지 않은 HTML입니다.

예. Jquery 파서 정리.

source code jquery를 자세히 살펴보면 html 함수는 실제로 innerHTML을 설정하기 전에 parseHTML을 사용합니다.

parseHTML은 buildFragment를 호출하고 문자열 내부의 모든 허위 요소를 제거합니다. 다음은

는 실제 전달 된 문자열 평가 및 DOM 노드를 생성됩니다 곳

// 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; 

예, 즉 buildFragment 기능의 소스 코드의 일부이다.

마지막으로 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 태그가 없습니다.

바닐라 자바 ​​스크립트 innerHTML의 경우에는 그런 구문 분석이 일어나지 않으며 브라우저는 DOM 노드에 제공된 문자열을 직접 해석하여 문서에 추가합니다.

요소의 하위를 모두 제거하고 내용 문자열을 구문 분석 한 다음 결과 노드를 요소의 하위로 할당합니다.