4

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 はどこへ行った??!

ここの矛盾がわかりません。ドキュメントフラグメントが特定の要素のみを保持することは可能ですか? 私がやりたいことは、上記の 2 番目と同様のことを行い、 を使用して td を取得することquerySelectorです。

ありがとう

4

3 に答える 3

5

解決策 1

createDocumentFragment()を使用して要素を作成し、次<td>のように DocumentFragment に追加しappendChild()ます。

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

解決策 2

要素を作成し、<template>HTML コンテンツを に追加innerHTMLしてから、contentプロパティから DocumentFragment を取得します。

var template = document.createElement( 'template' )
template.innerHTML = '<td></td>'
var frag = template.content
console.log( frag.childNodes )   // output => [td]
于 2017-03-30T08:47:51.430 に答える