[jQuery] 要素内のテキストやタグを取得する（.text、.html）

投稿日：2017年7月9日更新日：2018年4月28日

要素内のテキストやタグを取得するには、.text()、.html()を使用します。

構文

（構文）: //テキストを取得する var str = $("#test").text(); //タグを取得する var str = $("#test").html();

サンプル

例）ボタンを押すと、div要素内のテキスト、タグを取得する

<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(event){
    var str = $("#test").text();  //テキストで取得
    alert(str);
  });

  $('#btn2').click(function(event){
    var str = $("#test").html();  //HTMLで取得
    alert(str);
  });
});
</script>
</head>
<body>
<div id="test">あいうえお<u>かきくけこ</u>さしすせそ</div>
<input type="button" id="btn1" value="ボタン１">
<input type="button" id="btn2" value="ボタン２">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(event){

var str = $("#test").text(); //テキストで取得

alert(str);

});

$('#btn2').click(function(event){

var str = $("#test").html(); //HTMLで取得

alert(str);

});

</script>

</head>

<body>

<div id="test">あいうえお<u>かきくけこ</u>さしすせそ</div>

</body>

</html>

（結果）: //ボタン１あいうえおかきくけこさしすせそ //ボタン２あいうえお<u>かきくけこ</u>さしすせそ

解説

テキストのみを取得したい場合は.text、HTMLとして取得したい場合は.htmlを使います。
JavaScript版は以下をご覧ください。
→ HTML内の文字を動的に変更する（innerText）
→ HTML内のタグを動的に変更する（innerHTML）

執筆者：とら