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
関連記事
-
-
Lightboxで文字をクリックしたら画像を表示させる方法
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...
-
-
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...