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 / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
Lightboxの最新版ライブラリ「Lightbox3」の利用方法サンプル
画像拡大(モーダル表示)系のライブラリはLightbox2を使用していたが、最新 ...
-
-
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...
-
-
JavaScriptの「pako」ライブラリでGzip圧縮したデータをPHPで展開する方法
先日、JavaScriptの「pako」ライブラリで文字列やオブジェクト(連想配 ...