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

あるサイトのソースコードを拝見していると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/