勉強したことのメモ

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

jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法

  jQuery JavaScript

あるサイトのソースコードを拝見しているとjQueryで$.parseHTML()という見慣れない記述があった。内容的にはajaxで他ページのHTMLを取得して扱いやすい形に変換する際に$.parseHTML()を使っているように見受けられた。以下に具体的な利用方法をメモ。

 

利用方法

ソースコード

$(function(){
    const html = `
        <div class="parent">
            parent
            <div class="child">
                child
            </div>
        </div>
    `;
    const parse_array = $.parseHTML(html);
    const parse_obj = $($.parseHTML(html));
    console.log(parse_array);
    console.log(parse_obj);
});

出力例

上記ソースコードを実行した際、コンソールログには以下のような内容が出力される。

Array(3) [ #text, div.parent, #text ]
​0: #text "\n\t\t\t"
1: <div class="parent">
2: #text "\n\t\t"
length: 3
​
Object { 0: #text, 1: div.parent, 2: #text, length: 3 }
0: #text "\n\t\t\t"
1: <div class="parent">
2: #text "\n\t\t"
length: 3

指定した要素を抽出したい場合

console.log(parse_obj.find(`.child`).text()); //child

 

リファレンス

jQuery.parseHTML()

https://api.jquery.com/jQuery.parseHTML/

 - jQuery JavaScript

  関連記事

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

タブアンダー広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...