jQueryオブジェクトが保持している最初のDOM要素に含まれるHTMLを返す。
サンプル
実行結果
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- Internals
Javascript
$('.jqTest1 .screen').text($('.jqTest1 ul').html());
HTML
<div class="jqTest1">
<ul>
<li>jQuery Core</li>
<li>Selectors</li>
<li>Attributes</li>
<li>Traversing</li>
<li>Manipulation</li>
<li>CSS</li>
<li>Events</li>
<li>Effects</li>
<li>Ajax</li>
<li>Utilities</li>
<li>Internals</li>
</ul>
<hr />
<div class="screen">
</div>
</div>
.html( htmlString )
引数
- (string)htmlString
- HTML
jQueryオブジェクトが保持しているDOM要素のHTMLをhtmlStringにする。
サンプル
Javascript
$('.jqTest2 .execute').click(function(){
$('.jqTest2 ul').html('<li>change</li>');
});
HTML
<div class="jqTest2">
<input type="button" value="execute" class="execute btn btn-execute" />
<ul>
<li>jQuery Core</li>
<li>Selectors</li>
<li>Attributes</li>
<li>Traversing</li>
<li>Manipulation</li>
<li>CSS</li>
<li>Events</li>
<li>Effects</li>
<li>Ajax</li>
<li>Utilities</li>
<li>Internals</li>
</ul>
</div>
.html( function(index, oldhtml) )
引数
- (string)index
- jQueryオブジェクト内でのindex
- (string)oldhtml
- 現在設定されてるHTML
サンプル
実行結果
jQuery Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
Internals
Javascript
$('.jqTest3 .execute').click(function(){
$('.jqTest3').html(function(index, oldhtml){
return oldhtml.replace(/p>/g, 'span>');
});
});
HTML
<div class="jqTest3">
<input type="button" value="execute" class="execute btn btn-execute" />
<p>jQuery Core</p>
<p>Selectors</p>
<p>Attributes</p>
<p>Traversing</p>
<p>Manipulation</p>
<p>CSS</p>
<p>Events</p>
<p>Effects</p>
<p>Ajax</p>
<p>Utilities</p>
<p>Internals</p>
</div>