勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

HOME > JavaScript > JavaScriptにてHTML文字列をDOMノードに変換する方法

JavaScriptにてHTML文字列をDOMノードに変換する方法

2024/11/05 JavaScript

先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法をメモしたが、同じようなことをバニラJavaScriptでも対応できるようにしたい。調べたところDOMParserを用いることで対応できそう。以下に利用方法をメモ。

目次

1 利用方法
- 1.1 ソースコード
2 リファレンス
- 2.1 DOMParser
- 2.2 DOMParser: parseFromString() method

利用方法

ソースコード

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で全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」みたいなもの。 ...

: Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl＋スクロール」、スマホだと「 ...

: JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

: jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

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

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