勉強したことのメモ.

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のIntersectionObserverを利用して指定した要素が表示されているか確認する方法
JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...

バニラJavaScriptにて「ipify API」を利用してユーザのIPアドレスを取得する方法
バニラJavaScriptにて「ipify API」を利用してユーザのIPアドレスを取得する方法

あるサイトでユーザのIPアドレスを取得したいというケースがあった。普段であればP ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...

Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法
Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法

LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリ ...