どのプログラム言語もそうですが、現在変数に入っている値を出力してみてなんぼという世界観がありまして、開発中においてもデバックにおいても欠かせないものがあります。jQueryで出力するにはどうするのかというと、Attributes/APIのhtml()やtext()を利用します。Javascriptの開発中ではdocument.write()を使用したりalert()使用したりする方もおられると思いますが、jQueryはDOM要素に直接アクセスできるので非常に楽ちんです。

• htmlタグを表示する
• 文字列を表示する
• 既存の文字列の前に表示する
  
• 既存の文字列の後に表示する
• 既存のタグの前に表示する
• 既存のタグの後ろに表示する
• スカラー変数を出力する
  
• 配列を出力する
• 連想配列を出力する
  

文字列などをとりあえず出力する

　html内に出力領域をタグで確保しておけばそこに出力した値を表示できます。

html()

Sample

jQuery code:
$(document).ready(function(){
    $("#output").html("<b>文字出力します。</b>");
});

html code:
<div id="output"></div>

text()

　html()は、htmlタグで出力したいものを直接書き込めるというものです。ですのでhtmlタグはすべてタグとして評価されます。<b>というタグを文字列として評価したい場合は、text()を使います。Sample

jQuery code:
$("#output").text("<b>文字出力します。</b>");

 html()とtext()を覚えておけば出力に関しては困ることは殆どないと思います。

prepend()

　既存の文字列の前に文字列を追加することができます。文字列の前にhtml出力することができるので、例えば、"<b>前に追加した文字列です。</b>"を"<div id="output">既存の文字列があります。</div>"に追加するとセレクタで指定したタグの中に埋め込むことになります。つまり、
<div id="output"><b>前に追加した文字列です。</b>既存の文字列があります。</div>
という形になるわけです。Sample

jQuery code:
$(document).ready(function(){
     $("#output").prepend("<b>前に追加した文字列です。</b>");
});

html code:
<div id="output">既存の文字列があります。</div>

append()

　appendなるものがありまして、これは値を追加します。既存の文字列の一番後ろに追加して表示することができます。追加する時の挙動はhtml()と同様でhtmlタグはタグとして扱われます。Sample

jQuery code:
$(document).ready(function(){
    $("#output").html("<b>追加した文字列です。</b>");
});

html code:
<div id="output">既存の文字列があります。</div>

html()、text()、appaend()の３つでほぼデバック時の出力はOK！

before()

　セレクタで指定したタグの前にhtmlタグを出力することもできます。いろいろな使いどころがあるのでこれもできれば覚えておきたいところ。Sample

jQuery code:
$(document).ready(function(){
    $("#output").before("<b>前にhtmlタグを入れます。</b>");
});

html code:
<div id="output">既存の文字列がここにあります。</div>

after()

　セレクタで指定したタグの後ろへhtmlタグを追加することも勿論できます。Sample

jQuery code:
$(document).ready(function(){
     $("#output").after("<b>後ろにhtmlタグを入れます。</b>");
});

html code:
<div id="output">既存の文字列がここにあります。</div>

通常のスカラー変数を出力する

　特に注意すべき点はないのですが、varで宣言された変数をそのままhtml()やtext()の引数に渡してやるだけOK。渡す際にはクォートでくくらないようにします。くくってしまうと文字列と認識してしまうので。ダブルクォートだと変数展開するのかな...と思ったけど、そうはなりませんでした。
　ここではhtml()で変数出力していますが、text()でもappend()でも同様に変数をセットできます。

jQuery code:
var aaa='123456';
$(document).ready(function(){
    $("#output").html(aaa);
});

html code:
<div id="output"></div>

配列を出力する

配列となると結構ややこしいのですが覚えてしまえば簡単です。forなんかでループさせてしまえばいいと思いますが、jQueryではこれまたちょっと変わった関数を使って連続処理を行います。each()というものがあります。Sample

jQuery code:
var array = new Array('日本','韓国','台湾','中国');
$(function(){
    $.each(array, function(index, value){
         $("#disp").append(index + ":" + value).append('<br />');
    })
});

html code:
<div id="disp"></div>

PHPでいうところのforeach()みたいなものですね。each()はかなり多機能でオブジェクトなんかもつっこめたりいろいろできます。しかし基本的な機能としては、

each(<配列>,function(<index>,<value>) {
   ...出力
}

という感じで配列の値を見ることができます。
　注意すべき点は、出力の際にappendを利用しているという点です。ループさせて次々に...という出力方法ですので、後からどんどん追加するのでappendなわけです。text()やhtml()の場合は上書きされてしまうので一番最後の配列要素しか表示されなくなってしまいます。

連想配列を出力する

　これも基本的には普通の配列と同じです。Sample

jQuery code:
var array = { Japan: '日本' , South_Korea: '韓国', Taiwan:'台湾', China:'中国' };
$(function(){
    $.each(array, function(key, value){
         $("#disp").append(key + ":" + value).append('<br />');
    })
});

html code:
<div id="disp"></div>

　連想配列も同様にそのキーと値を順に取り出せるのです。