jQuery APIリファレンスDOM制御･更新処理：コンテンツの変更
html()
最初にマッチした要素のHTMLコンテンツ（innerHTML）を取得
2009/2/27
html() 戻り値：文字列
最初にマッチした要素のHTMLコンテンツ（innerHTML）を取得します。 このプロパティは、XMLドキュメント上では利用できません（XHTMLドキュメント上では動作します）。
html()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM制御･更新処理：コンテンツの変更：html()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample").click(function(){
var htmlStr=$(this).html();
$(this).text(htmlStr);
});
});
</script>
<style type="text/css">
#sample { width:450px; padding:10px; background-color:yellow; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM制御･更新処理：コンテンツの変更：html()の使用例 | jQuery</h1>
<!-- CODE -->
<div id="sample"><p>クリックすると、<strong>要素のHTMLコンテンツ</strong>を表示します。</p></div>
<!-- / CODE -->
</div>
</body>
</html>
html(val)
マッチした各要素にHTMLコンテンツを設定
2009/2/27
html(val) 戻り値：jQuery
マッチした各要素にHTMLコンテンツを設定します。
このプロパティは、XMLドキュメント上では利用できません（XHTMLドキュメント上では動作します）。
第1引数valには、設定するHTMLコンテンツを指定します。
html(val)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM制御･更新処理：コンテンツの変更：html(val)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_html_append").click(function(){
$("ol > li").html("<strong>アイテム</strong>");
$("ol > li > strong").append(document.createTextNode("!!!")).css("color","red");
});
$("#btn_html").click(function(){
$("ul > li").html("<strong>アイテム</strong>").css("color","blue");
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM制御･更新処理：コンテンツの変更：html(val)の使用例 | jQuery</h1>
<p>▼ボタンをクリックすると、各li要素にHTMLコンテンツを設定します。</p>
<!-- CODE -->
<p><button id="btn_html_append">HTMLコンテンツ設定</button></p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<br>
<p><button id="btn_html">HTMLコンテンツ設定</button></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
text()
マッチした要素すべてのテキストを結合した文字列を取得
2009/2/27
text() 戻り値：文字列
マッチした要素すべてのテキストを結合した文字列を取得します。
このメソッドはHTML、MLドキュメントの両方で動作しますが、input要素には使用できません。 input要素の入力値を取得するには、val属性を使用してください
text()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM制御･更新処理：コンテンツの変更：text()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 例1：すべてのli要素のテキストを取得し、取得したテキストを表示 */
$("#btn_text").click(function(){
$("#res").val($("li").text());
});
/* 例2：最初のp要素のテキストを取得し、最後のp要素に取得したテキストを表示 */
var str=$("#sample p:first").text();
$("#sample p:last").html(str);
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM制御･更新処理：コンテンツの変更：text()の使用例 | jQuery</h1>
<p>例1：クリックすると、li要素にHTMLコンテンツを設定します。</p>
<!-- CODE -->
<p><button id="btn_text">li要素のテキストを取得</button></p>
<p><input type="text" id="res" style="width:300px;"></p>
<ul>
<li><strong style="color:red;">アイテム1</strong></li>
<li><strong style="color:blue;">アイテム2</strong></li>
<li><strong style="color:green;">アイテム3</strong></li>
</ul>
<br>
<p>例2：ID名が「sample」のdiv要素の中にある、最初のp要素のテキストを取得し、最後のp要素に取得したテキストを表示します。</p>
<div id="sample">
<p><b>Test</b> Paragraph.</p>
<p></p>
</div>
<!-- / CODE -->
</div>
</body>
</html>
text(val)
マッチした要素すべてに指定したテキストを設定
2009/2/27
text(val) 戻り値：jQuery
マッチした要素すべてに指定したテキストを設定します。
指定したテキストにHTMLが含まれる場合、エスケープされます（「<」は「<」、「>」は「>」に置換されます）。 text(val)は、input要素には使用できません。 input要素に入力値を設定する場合は、val(val)を使用してください
第1引数valには、要素のコンテンツに設定する値を指定します。
text(val)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM制御･更新処理：コンテンツの変更：text(val)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_text").click(function(){
$("li").text("アイテム");
});
/* 例2 */
$("#sample").text("<b>Some</b> new text.").css("color","red");
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM制御･更新処理：コンテンツの変更：text(val)の使用例 | jQuery</h1>
<!-- CODE -->
<p>例1：クリックすると、li要素にテキストを設定します。</p>
<p><button id="btn_text">li要素にテキストを設定</button></p>
<ul>
<li><strong style="color:red;">アイテム1</strong></li>
<li><strong style="color:blue;">アイテム2</strong></li>
<li><strong style="color:green;">アイテム3</strong></li>
</ul>
<br>
<p>例2：ID名が「sample」のdiv要素にテキストを設定します（b要素はエスケープされます）。
<div id="sample">Test Paragraph.</div>
<!-- / CODE -->
</div>
</body>
</html>