jQueryにおけるtext()とhtml()の徹底解説：使い分けをマスターしてWeb開発を効率化！

2024-04-20

jQueryにおけるtext()とhtml()の違い：徹底解説

text()メソッド

役割: 要素内のテキストコンテンツのみを取得・設定します。
返される値: 要素内のテキストのみを文字列として返します。HTMLタグは含まれません。
例:

<div id="myDiv">
  <h1>見出し</h1>
  <p>本文</p>
</div>

// 要素内のテキストコンテンツを取得
const textContent = $("#myDiv").text();
console.log(textContent); // 出力: "見出し本文"

// 要素内のテキストコンテンツを設定
$("#myDiv").text("新しいテキスト");
console.log($("#myDiv").html()); // 出力: "<div>新しいテキスト</div>"

html()メソッド

返される値: 要素内のHTMLコンテンツ全体を文字列として返します。テキストだけでなく、HTMLタグも含まれます。

<div id="myDiv">
  <h1>見出し</h1>
  <p>本文</p>
</div>

// 要素内のHTMLコンテンツを取得
const htmlContent = $("#myDiv").html();
console.log(htmlContent); // 出力: "<h1>見出し</h1><p>本文</p>"

// 要素内のHTMLコンテンツを設定
$("#myDiv").html("<h1>新しい見出し</h1><p>新しい本文</p>");
console.log($("#myDiv").text()); // 出力: "新しい見出し新しい本文"

使い分けのポイント

テキストのみを操作したい場合はtext()メソッドを使用します。
HTMLタグも含めて操作したい場合はhtml()メソッドを使用します。
DOM操作の際は、それぞれの役割と返される値の違いを理解した上で使い分けることが重要です。

補足

text()メソッドは、要素の子孫要素のテキストコンテンツも全て取得します。
jQueryで要素の内容を操作する際には、text()とhtml()以外にも、val()やattr()などのメソッドが用意されています。

その他

上記以外にも、text()とhtml()には様々な用途があります。詳細は、jQueryの公式ドキュメントなどを参照してください。

text()メソッドの使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery: text()メソッド</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <h1>見出し</h1>
    <p>本文</p>
  </div>

  <script>
    // 要素内のテキストコンテンツを取得
    const textContent = $("#myDiv").text();
    console.log(textContent); // 出力: "見出し本文"

    // 要素内のテキストコンテンツを設定
    $("#myDiv").text("新しいテキスト");
    console.log($("#myDiv").html()); // 出力: "<div>新しいテキスト</div>"
  </script>
</body>
</html>

html()メソッドの使用例

この例では、html()メソッドを使用して、要素内のHTMLコンテンツを取得・設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery: html()メソッド</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <h1>見出し</h1>
    <p>本文</p>
  </div>

  <script>
    // 要素内のHTMLコンテンツを取得
    const htmlContent = $("#myDiv").html();
    console.log(htmlContent); // 出力: "<h1>見出し</h1><p>本文</p>"

    // 要素内のHTMLコンテンツを設定
    $("#myDiv").html("<h1>新しい見出し</h1><p>新しい本文</p>");
    console.log($("#myDiv").text()); // 出力: "新しい見出し新しい本文"
  </script>
</body>
</html>

その他

上記以外にも、text()とhtml()の様々な用途を示すサンプルコードを作成することは可能です。具体的な用途や目的に合わせて、適切なコードを記述してください。

jQueryにおけるtext()とhtml()の代替方法

DOM操作:

ネイティブなJavaScriptのDOM操作を使用する方法です。
jQueryよりもシンプルで軽量ですが、コード量が多くなる場合があり、複雑な操作には向いていません。

// 要素内のテキストコンテンツを取得
const textContent = document.getElementById("myDiv").textContent;
console.log(textContent); // 出力: "見出し本文"

// 要素内のHTMLコンテンツを取得
const htmlContent = document.getElementById("myDiv").innerHTML;
console.log(htmlContent); // 出力: "<h1>見出し</h1><p>本文</p>"

textContentプロパティ:

要素のtextContentプロパティを使用して、テキストコンテンツを取得・設定する方法です。
jQueryのtext()メソッドとほぼ同じ役割ですが、jQueryに依存しないため、軽量なコードを作成できます。

// 要素内のテキストコンテンツを取得
const textContent = document.getElementById("myDiv").textContent;
console.log(textContent); // 出力: "見出し本文"

// 要素内のテキストコンテンツを設定
document.getElementById("myDiv").textContent = "新しいテキスト";
console.log(document.getElementById("myDiv").innerHTML); // 出力: "<div>新しいテキスト</div>"

// 要素内のHTMLコンテンツを取得
const htmlContent = document.getElementById("myDiv").innerHTML;
console.log(htmlContent); // 出力: "<h1>見出し</h1><p>本文</p>"

// 要素内のHTMLコンテンツを設定
document.getElementById("myDiv").innerHTML = "<h1>新しい見出し</h1><p>新しい本文</p>";
console.log(document.getElementById("myDiv").textContent); // 出力: "新しい見出し新しい本文"