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にてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法
以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...