jQuery API の jQuery.parseHTML( data, keepScripts ) は、引数「data」に指定したHTMLの文字列をパースし、DOMノードの配列に格納するメソッド。scriptタグの内容を含めるかどうかを、引数「keepScripts」に指定できる。
引数
- data
HTMLの文字列。
- keepScripts
booleanType（論理型）。
data内にscriptを含めるかどうかのブール値。
true：scriptタグの内容を含める。
false：scriptタグの内容を含めない。
初期設定値は、「false」。
戻り値
- Array
DOMノード配列。
記述例
var data = '<li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li><script type="text/javascript">alert( "追加完了" )</script>';
var parseHTML = jQuery . parseHTML( data );
jQuery( '#sample' ) . append( parseHTML );
var parseHTML = jQuery . parseHTML( data );
jQuery( '#sample' ) . append( parseHTML );
idが「sample」である要素に、「項目Ａ～Ｃ」を追加し、「追加完了」というアラートを表示する。
実装例（サンプル）
ボタンクリック数：0- このリストに追加。
実装例（サンプル）の動作について
「項目を追加」ボタンをクリックする度に、「このリストに追加。」の後に、３つのリスト項目を追加する。「ボタンクリック数：」の右横に、リック回数を表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var $itemCount = 1;
var $clickCount = 1;
jQuery( '#sample-button' ) . click( function() {
var $data = '<li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><script type="text/javascript">jQuery( "#sample-clickCount" ) . text( ' + $clickCount++ + ' );</script>';
var $parseHTML = jQuery . parseHTML( $data, true );
jQuery( '#sample-ol' ) . append( $parseHTML );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var $itemCount = 1;
var $clickCount = 1;
jQuery( '#sample-button' ) . click( function() {
var $data = '<li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><script type="text/javascript">jQuery( "#sample-clickCount" ) . text( ' + $clickCount++ + ' );</script>';
var $parseHTML = jQuery . parseHTML( $data, true );
jQuery( '#sample-ol' ) . append( $parseHTML );
} );
} );
// -->
</script>
CSS
<style>
<!--
#sample-ol {
margin: 10px;
padding: 10px 50px;
background-color: #ffffe0;
border: 1px solid gray;
border-radius: 10px;
}
#sample-button {
margin-right: 10px;
}
-->
</style>
<!--
#sample-ol {
margin: 10px;
padding: 10px 50px;
background-color: #ffffe0;
border: 1px solid gray;
border-radius: 10px;
}
#sample-button {
margin-right: 10px;
}
-->
</style>
HTML
<button id="sample-button">項目を追加</button>ボタンクリック数：<span id="sample-clickCount">0</span>
<ol id="sample-ol">
<li>このリストに追加。</li>
</ol>
<ol id="sample-ol">
<li>このリストに追加。</li>
</ol>