勉強したことのメモ

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にてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法

あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法

jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

JavaScriptの変数宣言であるvar / let / constの使い分けについて

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...