勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにてHTML文字列をDOMノードに変換する方法

  JavaScript

先日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

 - JavaScript

  関連記事

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法
CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル

あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...

javascriptでランダム英数字
javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法
Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非 ...