勉強したことのメモ

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

  関連記事

Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

summernoteにクリップボードにコピー機能を追加する方法
summernoteにクリップボードにコピー機能を追加する方法

summernoteのツールバーに新たにボタンを設置し、そのボタンをクリックする ...

javascriptでHTML内に関数を書きたい場合
javascriptでHTML内に関数を書きたい場合

ダイアログ確認したいだけでわざわざfunctionを書くのもアレだという時に使い ...

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

JavaScriptにて正規表現を用いずに文字列の一括置換を行う方法
JavaScriptにて正規表現を用いずに文字列の一括置換を行う方法

文字列の一括置換を行う際、PHPだとstr_replaceで問題無く対応できるが ...