HOME > > > > >

.html()

.html()

戻り値

string
HTML

jQueryオブジェクトが保持している最初のDOM要素に含まれるHTMLを返す。

サンプル

実行結果

  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • Internals

Javascript

  1. $('.jqTest1 .screen').text($('.jqTest1 ul').html());

HTML

  1. <div class="jqTest1">
  2.     <ul>
  3.         <li>jQuery Core</li>
  4.         <li>Selectors</li>
  5.         <li>Attributes</li>
  6.         <li>Traversing</li>
  7.         <li>Manipulation</li>
  8.         <li>CSS</li>
  9.         <li>Events</li>
  10.         <li>Effects</li>
  11.         <li>Ajax</li>
  12.         <li>Utilities</li>
  13.         <li>Internals</li>
  14.     </ul>
  15.  
  16.     <hr />
  17.  
  18.     <div class="screen">
  19.     </div>
  20. </div>

.html( htmlString )

引数

(string)htmlString
HTML

jQueryオブジェクトが保持しているDOM要素のHTMLをhtmlStringにする。

サンプル

実行結果

  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • Internals

Javascript

  1. $('.jqTest2 .execute').click(function(){
  2.     $('.jqTest2 ul').html('<li>change</li>');
  3. });

HTML

  1. <div class="jqTest2">
  2.     <input type="button" value="execute" class="execute btn btn-execute" />
  3.     <ul>
  4.         <li>jQuery Core</li>
  5.         <li>Selectors</li>
  6.         <li>Attributes</li>
  7.         <li>Traversing</li>
  8.         <li>Manipulation</li>
  9.         <li>CSS</li>
  10.         <li>Events</li>
  11.         <li>Effects</li>
  12.         <li>Ajax</li>
  13.         <li>Utilities</li>
  14.         <li>Internals</li>
  15.     </ul>
  16. </div>

.html( function(index, oldhtml) )

引数

(string)index
jQueryオブジェクト内でのindex
(string)oldhtml
現在設定されてるHTML

サンプル

pタグをspanに変更

実行結果

jQuery Core

Selectors

Attributes

Traversing

Manipulation

CSS

Events

Effects

Ajax

Utilities

Internals

Javascript

  1. $('.jqTest3 .execute').click(function(){
  2.     $('.jqTest3').html(function(index, oldhtml){
  3.         return oldhtml.replace(/p>/g, 'span>');
  4.     });
  5. });

HTML

  1. <div class="jqTest3">
  2.     <input type="button" value="execute" class="execute btn btn-execute" />
  3.     <p>jQuery Core</p>
  4.     <p>Selectors</p>
  5.     <p>Attributes</p>
  6.     <p>Traversing</p>
  7.     <p>Manipulation</p>
  8.     <p>CSS</p>
  9.     <p>Events</p>
  10.     <p>Effects</p>
  11.     <p>Ajax</p>
  12.     <p>Utilities</p>
  13.     <p>Internals</p>
  14. </div>