要素の、プロパティ一覧を出力させる方法

質問

初学者ですが、宜しくお願いいたします。
JavaScriptのプロパティにどんなものがあり、実際設定されているのか？
から思い立ち、以下のソースを書いてみました。

<form>
<textarea id="ta">てすと</textarea>
</form>
<script type="text/javascript">
//idの付いたオブジェクト毎に、プロパティ一覧を出力させる方法
var prop=document.getElementById("ta");
for(i in prop){
document.write(i+" = "+prop[i]+"<br>");
}
</script>

上だと思惑通り上手く行きますが、
ボタンを押したときに、<p id="propatydata"></p>の位置に表示させる仕様に変えようと思い、以下のようにしてみました。

<form>
<textarea id="na">てすと</textarea>
<input type="button" id="kakunin" onclick="propatys('na');" value="要素のプロパティ一覧を出力" />
</form>
<p id="propatydata"></p>
<script type="text/javascript">
<!--
function propatys(id){
var props=document.getElementById(id);
for(i in props){
document.write(i+" = "+props[i]+"<br>");
}
}
// -->
</script>

テンパリました。
chromeの検証で「Uncaught TypeError: Cannot convert object to primitive value」となります。
またページが丸ごと変更？されてしまうようです。IEでもfoxでも動作しない、またはページが丸ごと変更されてしまいます。

出来るだけ簡潔なソースにするため、「for～in」は使って書いた方が良いと思うのですが、英知をお持ちの方、ご教授お願い致します。

回答No.1

SAYKA

document.writeはjsがHTMLをstreamとして書き出してる間・・・つまり最初のHTML読み込み中かopenしたdocumentに対してしかできなくて、すでに描画が終って呼び出すfunction中に書いてある場合は動作しないよ。

そういう場合はelementをごっそり入れ替えるinnerHTMLとかを使ったら良いんじゃないかな。

http://www.tohoho-web.com/js/dom.htm#inner

補足

早速の回答ありがとうございます＾＾

>document.writeはjsがHTMLをstreamとして書き出してる間・・・つまり最初のHTML読み込み中かopenしたdocumentに対してしかできなくて、すでに描画が終って呼び出すfunction中に書いてある場合は動作しないよ。

つまり、ボタンを押して初めて動作するようなスクリプトの中で、document.writeを記述しても正しく動作しない？って理解で良いのでしょうか？

innerHTMLを私なりに使って、以下のように修正してみました。

<script type="text/javascript">
<!--
function propatys(id){
var props=document.getElementById(id);
for(i in props){
var pd = pd+i+" = "+props[i]+"<br>";
}
document.getElementById("propatydata").innerHTML=pd;
}
// -->
</script>

「Uncaught ReferenceError: propatys is not defined」エラーになります。