jQuery

html（）

は、一致した要素の最初の要素のHTMLコンテンツを取得するために使用されます。

html（ ‘new html content’）

は、一致するすべての要素のHTMLコンテンツを置き換えるか、または設定するために使用されます。

たとえば、同じクラス名 “AClass”を含む2つのdiv要素です。 

<div class="AClass">ABC 1</div>
<div class="AClass">ABC 2</div>

1. $（ ‘. AClass’）.html（）

これは ”

ABC 1

“のみを取得し、2番目に一致する要素 “ABC 2″は無視されます。

2. $（ ‘. AClass’）.html（ ‘

これは新しいテキスト

‘）

これは、すべての一致した要素のHTMLコンテンツを置き換えます。 

<div class="AClass"><b>This is new text</b></div>
<div class="AClass"><b>This is new text</b></div>

jQuery html（）の例

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    .htmlClass{
        padding:8px;
        border:1px solid blue;
        margin-bottom:8px;
    }
</style>

</head>
<body>
  <h1>jQuery html() example</h1>

  <div class="htmlClass">I'm going to replate by something ....</div>

  <div class="htmlClass">I'm going to replate by something 2....</div>

  <p>
  <button id="getHtml">html()</button>
  <button id="setHtml">html('xxx')</button>
  <button id="reset">reset</button>
  </p>

  <script type="text/javascript">

    $("#getHtml").click(function () {

      alert($('.htmlClass').html());

    });

    $("#setHtml").click(function () {

      $('.htmlClass').html('<b>This is a new text</b>');

    });

    $("#reset").click(function () {
      location.reload();
    });

</script>
</body>
</html>


デモを試してください


jquery


jquery
操作