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
関連記事
-
-
Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法
Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあ ...
-
-
LightboxをjQuery無しで実装できる「Luminous」の利用方法
あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...
-
-
jQueryで要素を移動する方法のまとめ
jQueryで要素を移動する際、insertBefore / insertAft ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...