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()
関連記事
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...