JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法をメモしたが、同じようなことをバニラJavaScriptでも対応できるようにしたい。調べたところDOMParserを用いることで対応できそう。以下に利用方法をメモ。
利用方法
ソースコード
const html = `
<div class="parent">
parent
<div class="child">
child
</div>
</div>
`;
const parser = new DOMParser();
const parse_html = parser.parseFromString(html, `text/html`);
console.log(parse_html.querySelector('.child').innerHTML); //child
リファレンス
DOMParser
https://developer.mozilla.org/ja/docs/Web/API/DOMParser
DOMParser: parseFromString() method
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
関連記事
-
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
-
iPhoneにホーム画面登録を促すダイアログを表示
スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれど ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...
-
-
日付の範囲指定用プラグイン「DateRangePicker」の利用方法
日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...
-
-
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...