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
関連記事
-
-
jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...
-
-
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...