jQuery API の jQuery.parseHTML( data ) は、引数「data」に指定したHTMLの文字列をパースし、DOMノードの配列に格納するメソッド。
引数
- data
HTMLの文字列。
戻り値
- Array
DOMノード配列。
記述例
var data = "<li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li>";
var parseHTML = jQuery . parseHTML( data );
jQuery( '#sample' ) . append( parseHTML );
var parseHTML = jQuery . parseHTML( data );
jQuery( '#sample' ) . append( parseHTML );
idが「sample」である要素に、「項目Ａ～Ｃ」を追加する。
実装例（サンプル）
- このリストに追加。
実装例（サンプル）の動作について
「項目を追加」ボタンをクリックする度に、「このリストに追加。」の後に、３つのリスト項目を追加する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var $itemCount = 1;
jQuery( '#sample-button' ) . click( function() {
var $data = '<li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li>';
var $parseHTML = jQuery . parseHTML( $data );
jQuery( '#sample-ol' ) . append( $parseHTML );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var $itemCount = 1;
jQuery( '#sample-button' ) . click( function() {
var $data = '<li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li><li>追加項目' + $itemCount++ + '</li>';
var $parseHTML = jQuery . parseHTML( $data );
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>
<ol id="sample-ol">
<li>このリストに追加。</li>
</ol>
<ol id="sample-ol">
<li>このリストに追加。</li>
</ol>