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
関連記事
-
-
AndroidのChromeでハマった点
Nexus7(Android4.3)のChromeでハマった。 iPhoneやG ...
-
-
Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...
-
-
JavaScriptの「Day.js」ライブラリで日付の比較を行う方法
JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...
-
-
JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法
ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...