td, tr 또는 th를 저장하는 DocumentFragment를 만들 수 없습니까?

Question

DocumentFragments에 tr, th 또는 td 태그가 포함될 수 있습니까?

내가 이렇게 할 경우 :

var template = document.createRange().createContextualFragment(
     '<table></table>' 
    ); 

    console.log(template.childNodes); 

내가 [table]의 출력을 얻을. 내가 이렇게하면

:

var template = document.createRange().createContextualFragment(
     '<td></td>' 
    ); 

    console.log(template.childNodes); 

내가 []의 출력을 얻을!?!?

나는이 할 경우

var template = document.createRange().createContextualFragment(
     '<td><p></p></td>' 
    ); 

    console.log(template.childNodes); 

내가 [p]을 얻을 ?? ?? ??!?!?!?!

그리고 마지막으로 나는이 작업을 수행 할 경우 :

내가 할

var template = document.createRange().createContextualFragment(
     '<span><td></td></span>' 
    ); 

    console.log(template.childNodes); 

[span] - TD를 어디 갔어요?!

여기서는 모순을 이해하지 못합니다. 문서 조각이 특정 요소 만 보유 할 수 있습니까? 내가 뭘하고 싶은지 위의 두 번째와 비슷한 일을하고 querySelector을 사용하여 td를 검색하십시오.

감사

Answer 1

해결 방법 1

사용 createDocumentFragement()하는 <td> 요소를 만들고, appendChild()으로 DocumentFragment가에 추가 :

var frag = document.createDocumentFragment() 
frag.appendChild(document.createElement('td')) 
console.log(frag.childNodes) // output => [td] 

해결 방법 2

CR content 특성에서의 DocumentFragment를 얻을 후,하는 <template> 요소를 eate innerHTML에 HTML 콘텐츠를 추가

var template = document.createElement('template') 
template.innerHTML = '<td></td>' 
var frag = template.content 
console.log(frag.childNodes) // output => [td] 

Answer 2

내가 (HTML 문자열에서 작성하는 문서 조각) 단지를이 일을위한 라이브러리를 작성했습니다. html-fragment이라고합니다.

이 작은 라이브러리는 범위 API를 사용하려고 시도하지만 최상위 노드가 특정 부모 노드 (예 : td)가 필요한 노드 인 경우 다른 솔루션을 시도합니다 (예 : template). 그렇지 않으면 올바른 부모 태그로 먼저 래핑 한 "구식 방식"으로 처리 한 다음 원하는 부모 노드를 임시 부모 노드없이 문서 조각에 추가합니다.

당신은 너무처럼 사용합니다 :

var html = '<td><p>Hello World</p></td>'; 
 
var fragment = HtmlFragment(html); 
 

 
console.log(fragment.firstChild) //td

<script src="https://unpkg.com/html-fragment@1.1.0/lib/html-fragment.min.js"></script>