jQuery入門 | 要素の操作 | 要素の内部変更 .html() .text()

Tags:

既存要素の内部変更

次のメソッドを使用すると、既存要素の内部に新しい要素やコンテンツを返したり設定したりできる。

メソッド 説明
.html() その要素のHTMLコンテンツを返すか設定する。
.text() その要素のテキストコンテンツを返すか設定する。

.html()メソッド

.html()メソッドは、選択した要素の内容を新しいHTML要素に変更する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.html()メソッドを利用すると、<p>要素の内容を新しいHTML要素に変更できる。

$("p").html("<div class='wrap'>devkumaです。</div>");

コードを実行

.text()メソッド

.text()メソッドは、選択した要素の内容を新しい単純なテキストに変更する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.text()メソッドを利用すると、<p>要素の内容を新しいテキストに変更できる。

$("p").text("devkumaです。");

コードを実行

.html()メソッドと.text()メソッドの違い

.html()は選択した要素の内容にHTMLタグ要素が含まれていればタグを適用して表示するが、.text()の場合はHTMLタグを適用せず文章をそのまま表示する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

次のようにHTMLを含む文を表示すると、HTMLタグは適用されず文がそのまま表示される。

$("p").text("<div class='wrap'>devkumaです。</div>");

コードを実行

.html()応用例

.html()とsetInterval()を利用して現在時刻を表示してみる。 実行すると、1秒（1000ms）ごとに時刻表示が変わる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>現在時刻</title>
    <script>
        $(function() {
          $("#now").text(new Date());
            setInterval(function() {
                $("#now").text(new Date());
            }, 1000);
        });
    </script>
</head>
<body>
    <h1>現在時刻</h1>
    <div id="now"></div>
</body>
</html>

コードを実行