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>