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
関連記事
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
Lightboxで文字をクリックしたら画像を表示させる方法
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptで文字列から数値(特に小数)へ変換時の注意点
JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...