勉強したことのメモ

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

  関連記事

JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法
JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法

1位から20位のランキング内でJavaScriptを用いてランダムに表示させたか ...

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法
Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...

無料でシンプルなアイコンを設置できる「Feather」の利用方法
無料でシンプルなアイコンを設置できる「Feather」の利用方法

ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

JavaScriptで文字列から数値(特に小数)へ変換時の注意点
JavaScriptで文字列から数値(特に小数)へ変換時の注意点

JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...