当記事ではHTML文字列からNodeに変換する方法について記します。
HTML文字列からNodeに変換
これはとても簡単で1行で関数を定義できます。
ここから先は補足情報になります。
const toNode = (str) => document.createRange().createContextualFragment(str)
const elem = toNode('<p id="hoge" class="hoge">hoge</p><p>foo</p>')変換したNodeに対してはDOM操作ができる
先ほどの方法で変換したNodeは、正式にはDocumentFragmentというのですがノードの一種です。
通常のようにDOM操作が行えます。
※getElementsByClassNameメソッドはなぜか使えないようなので注意が必要です。
const toNode = (str) => document.createRange().createContextualFragment(str)
const elem = toNode('<p id="hoge" class="hoge">hoge</p><p>foo</p>')
console.log(elem)
console.log(elem.getElementById('hoge'))
// console.log(elem.getElementsByClassName('hoge'))
console.log(elem.querySelector('#hoge'))
console.log(elem.querySelectorAll('.hoge'))
console.log(elem.children)
console.log(elem.childElementCount)
console.log(elem.firstElementChild)
console.log(elem.lastElementChild)
elem.append(toNode('<p>piyo</p>'))変換したNodeはそのままDOMに追加できる
先ほどの方法で変換したNodeはそのままDOMに追加する事ができます。
const toNode = (str) => document.createRange().createContextualFragment(str)
const elem = toNode('<p id="hoge" class="hoge">hoge</p><p>foo</p>')
document.body.append(elem)
以上、HTML文字列からNodeに変換する方法でした。
