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でlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法
ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキスト ...
-
-
Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法
Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...
-
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...