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で特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法
JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書 ...
-
-
summernote(WYSIWYGエディタ)の設置方法と日本語化対応
あるシステムにWYSIWYGエディタを実装したかった。以前にメモしたCKEdit ...
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...