【JavaScript】DOMParserで文字列をHTMLElement・Nodeに変換する
やりたいこと
const divStr = "<div>sample</div>";
const div = someFunc(divStr); // HTMLElementに変換したい
document.body.appendChild(div);
上記のように、文字列で構成されたHTMLタグをHTMLElementに変換しDOMに追加したい。
解決法
DOMParserを使う方法
const createElmFromStr = (str: string) => {
return new DOMParser().parseFromString(str, "text/html").body
.firstElementChild;
};
DOMParser
を使うことでよりシンプルに書ける。
innerHTMLを使う方法
const createElmFromStr = (str: string) => {
const template = document.createElement("template");
template.innerHTML = str.trim();
return template.content.firstChild;
};
変換用のタグ(上記では<template>
)を生成し、innerHTML
で子要素に追加した後に取り出す。
const createElmFromStr = (str: string) => {
const template = document.createElement("template");
const div = document.createElement("div");
div.innerHTML = str.trim();
return template.content.firstChild;
return template.firstElementChild;
};
好みの問題かもしれないが、template
以外のタグを使う場合はfirstElementChild
で取得できる。