勉強したことのメモ

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

  関連記事

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

セレクトメニューにサジェスト機能をつける方法(select2)
セレクトメニューにサジェスト機能をつける方法(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

日付の範囲指定用プラグイン「DateRangePicker」の利用方法
日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...