勉強したことのメモ

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にて画像をフルスクリーン表示する方法

JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただ ...

Chart.jsで描写したグラフを画像としてダウンロードさせる方法
Chart.jsで描写したグラフを画像としてダウンロードさせる方法

サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...

jQueryで対象の要素をまとめて親要素で囲む方法
jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動
jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...

tableタグ内のデータをCSV形式でダウンロードできる「jQuery-csvExport」ライブラリの使用方法
tableタグ内のデータをCSV形式でダウンロードできる「jQuery-csvExport」ライブラリの使用方法

HTMLのtableタグ内のデータをCSV形式でエクスポートさせたいケースがあっ ...