勉強したことのメモ

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

  関連記事

jQueryのdatetimepickerでスクロール入力を無効化させる方法

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...

JavaScriptのbeforeunloadイベントでページの離脱防止

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...

「jQuery.browser is undefined」エラーの対応方法

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...