js STUDIO

.html()

要素内のHTMLを取得、またはエレメント内に指定したHTMLを挿入します。

このメソッドはXMLドキュメントでは使用できません。

.html() 1.0追加

戻り値:String

マッチした1つ目の要素のHTMLを返します。

下記のコードの場合、 

$('div.demo-container').html();

<div class="demo-container">
  <div class="demo-box">デモ</div>
</div>

取得するHTMLはこのようになります。 

<div class="demo-box">デモ</div>

.html(htmlString) 1.0追加

戻り値:jQuery

マッチした要素に、指定したHTMLをセットします。

引数 説明
htmlString マッチした要素内に挿入するHTML文字列を指定します。

.html()をセットに使用した場合、対象のコンテンツは新しいコンテンツに完全に入れ替わります。
次のコードの場合、 

<div class="demo-container">
  <div class="demo-box">デモ</div>
</div>

$('div.demo-container')
  .html('<p>新しいコンテンツを<em>セット!</em></p>');

HTMLは次のように置き換わります。

<div class="demo-container">
  <p>新しいコンテンツを<em>セット!</em></p>
</div>

.html( function(index, oldhtml) ) 1.4追加

戻り値:jQuery

マッチした要素に、指定したHTMLをセットします。

引数 説明
function(index, oldhtml) マッチした要素内に挿入するHTML文字列を返す関数を指定します。
index
マッチした要素のインデクッス番号
oldhtml

下記の例では、もしページ内にP要素が6つあれば、「P要素は6個存在します！」という文章に切り替わります。

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + '個</em>存在します!';
  return '<p>P要素は' + emph + '</p>';
});

補足事項

取得の場合、セットの場合、いずれの場合でもinnerHTMLプロパティを使用することによる注意事項があります。

取得の場合
ブラウザによっては元のソースと同じHTMLを返してくれないケースもあります。 例えば、IEでは、属性が英数字のみの場合、その値を囲うクォート文字を 除去してしまうことがあります。
セットの場合

ブラウザによっては指定したHTML文字列に対して忠実にそれを生成してくれるとは限りません。 IE8より前のバージョンでは、href属性は絶対URLに変換されます。 また、IE9より前のバージョンでは、 互換性レイヤ を使用しないとHTML5の要素を正しく取り扱うことが出来ません。

IE9までを含め、IEではこのメソッドを使ってテキストコンテンツをセットしようとした際に、削除されている子要素のテキストノードが破損する可能性があります。 もし、このDOM要素の参照を保持したいのであれば、.html(string)の代わりに.empty().html(string)を使用することをお勧めします。

※翻訳に自信がないため、 本文を載せておきます。

Note: In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use .empty().html(string) instead of .html(string) so that the elements are removed from the document before the new string is assigned to the element.

デモ

P要素をクリックすると、それ自身のHTMLをテキストに変換してその場に出力します。

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:8px; font-size:14px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
  <b>クリックして</b> HTMLを <span id="tag">テキスト</span>
</p>
<p>
  ノードに <span id="text">変更</span> します。
</p>
<p>
  この <button name="nada">ボタンは</button> 飾りです。
</p>
<script>
  $("p").click(function () {
    var htmlStr = $(this).html();
    $(this).text(htmlStr);
  });
</script>
</body>
</html>

各DIV要素にHTML文字列をセットしています。 

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>こんにちは！</span>
<div></div>
<div></div>
<div></div>
<script>$("div").html("<span class='red'>再び <b>こんにちは！</b></span>");</script>
</body>
</html>

HTMLをセットした直後に、appendメソッドを実行して色を変更し、「!!!」を追加指定ます。 

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
  $("div").html("<b>凄い!</b> 感動しました。");
  $("div b").append(document.createTextNode("!!!"))
            .css("color", "red");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM