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.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
JavaScriptの三項演算子
いつもと違う書き方？ 使い方の三項演算子が あったのでメモ。 ■ソース var ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法
だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...
-
-
JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法
掲示板等で本文を送信する際に予め定めていた禁止ワードが含まれていないかチェックし ...