JavaScriptでHTMLを文字列で取得したらDOMParserで操作するべし

DOMParserとは

DOMParserとはHTMLをDOMノードオブジェクトに変換するためのAPIです。

例えば以下のようなHTMLを取得して、ul#list 内にliタグを追加して addString の文字列をliタグ内に入れたい場合…

const htmlString = '<h1>Hello world!</h1><ul id="list"><li>foo</li><li>bar</li></ul>'
const addString = '<baz>'

以下のようにDOMParserを使用することで、HTML内にliタグを追加して文字列を生成することができます。

const htmlString = '<h1>Hello world!</h1><ul id="list"><li>foo</li><li>bar</li></ul>'
const addString = '<baz>'

const parser = new DOMParser()
const doc = parser.parseFromString(htmlString, 'text/html')
const newLi = document.createElement('li')

newLi.textContent = addString
doc.getElementById('list').appendChild(newLi)

const resultString = doc.body.innerHTML
console.log(resultString)

// console.logの結果
<h1>Hello world!</h1><ul id="list"><li>foo</li><li>bar</li><li>&lt;baz&gt;</li></ul>

HTMLが文字列だとreplaceや文字列の連結(+)などで処理してしまう人がいますが、HTMLの場合はDOMノードオブジェクトに変換してから操作しないと記述ミスやエスケープの処理漏れが発生しやすいです。

そのため、なるべくDOMParserを使用することをオススメします。

DOMParserとは

関連した記事