.html()【要素内容 取得・設定 (HTMLコンテンツ)】

メモ

  • 要素内容のHTMLコンテンツ 取得
    • 該当の先頭要素が対象
    • ブラウザの innerHTML プロパティ使用
      ブラウザによっては、正確に取得不可 (例：IE で属性値が英数字のみの場合、時々クォーテーション省略)
  • 要素内容のHTMLコンテンツ 設定
    • 該当の全要素が対象
    • コンテンツを全置換 (元のデータ・イベントハンドラ等を削除)
    • ブラウザの innerHTML プロパティ使用
      ブラウザによっては、正確な置換不可
      (例：IE8 より前のバージョンでリンクのhref属性を絶対URLに変換、IE9 より前のバージョンで互換性レイヤを使用しないとHTML5要素が不正に処理)
    • IE9 以降で削除される子のテキストノードが破損する可能性有り
      ( .html(string) の代わりに .empty().html( string ) を使用)
  • 要素内容のHTMLコンテンツ 取得・設定 (共通)

構文

説明構文戻り値
HTMLコンテンツ 取得 .html() 1.0 String
HTMLコンテンツ 置換 .html( htmlString ) 1.0

htmlString htmlString：置換するHTMLコンテンツ文字列 		jQuery
.html( function ) 1.4

function( [ index [, oldhtml ] ] )
引数説明
Integer index要素インデックス (0～)
htmlString oldhtml元のHTMLコンテンツ
(this)処理中DOM要素
戻り値説明
htmlString置換するHTMLコンテンツ
jQuery

関連

例

<style>
.border { border:1px black solid; padding:1px 5px; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>

<div id="id1">
  <p id="id10" class="border"><span class="color1">コンテンツ</span></p>
  <p>.html() <span id="id11" class="border"></span> <span id="id12" class="border"></span></p>
  <p>.text() <span id="id13" class="border"></span> <span id="id14" class="border"></span></p>
  <p><span class="border class1">コンテンツ</span> <span class="border class1">コンテンツ</span></p>
</div>

<script>
var html = $( "#id10" ).html();
$( "#id11" ).html(html);
$( "#id12" ).text(html);

var text = $( "#id10" ).text();
$( "#id13" ).html(text);
$( "#id14" ).text(text);

$( "#id1 .class1" ).html(function(index, oldhtml) {
  var html = "<span class='bold'>[" + index + "] " + oldhtml + "</span>";
  return html;
});
</script>

コンテンツ

.html()

.text()

コンテンツ コンテンツ