勉強したことのメモ

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

  関連記事

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法
leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...

JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法

以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

leaflet.jsとOSMでマップ表示及びマーカー設置方法
leaflet.jsとOSMでマップ表示及びマーカー設置方法

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...