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からAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
架空の地図画像をLeafletを用いてWeb上でマップ表示する方法
ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...
-
-
異なる文字コード間でform送信する
formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...
-
-
バニラJavaScriptでinputタグのtypeをtext⇔passwordに変更する方法
チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...