勉強したことのメモ

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で同サーバ内のCSVを読み込み、配列として取り扱う方法
バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法

サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だと ...

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

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

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

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

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法
JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...