【JavaScript】DOMParserで文字列をHTMLElement・Nodeに変換する

JavaScript
2023-06-25

やりたいこと

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で取得できる。