xml+xslでの変換内容をtextareaへ
お世話になります。
xml+xslでhtmlに変換する際、その変換内容をtextareaにも表示させるようにしたいのです。
使用ブラウザ：FireFox。現状はFirebugでDOMツリーを手動で参照してる状況です。
現在は、ノードをtextareaに表示しようとすると[object DocumentFragment]とだけ出てしまい、DocumentFragmentという概念あることは分かり、色々調べcreateElement()やcreateTextNode()など、その他思いつく限りの事でテストしてみてるのですが、どうにもノードをHTMLタグとしてtextareaに表示させる事が出来ません。
以下にポイントとなるソースを掲示しますので、どなた様か、お助け願えませんでしょうか
--test.html----
<html><head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
<title>JS+xslt</title>
<script type="text/javascript">
function tramsformlists(xmlFile, xslFile, resultNodeID){
var xml, xslt, newDoc;
if(document.all){
xml = new ActiveXObject("Microsoft.XMLDOM");
xslt = new ActiveXObject("Microsoft.XMLDOM");
}else {
xml = document.implementation.createDocument("", "", null);
xslt = document.implementation.createDocument("", "", null);
}
xml.async = false;
xslt.async = false;
xml.load(xmlFile);
xslt.load(xslFile);
if(document.all){
document.getElementById(resultNodeID).innerHTML = xml.transformNode(xslt);
}else {
var xsltp = new XSLTProcessor();
xsltp.importStylesheet(xslt);
newDoc = xsltp.transformToFragment(xml, window.document);
var df = document.createDocumentFragment();
cloneDoc= newDoc.cloneNode(true);
document.getElementById("Div"+resultNodeID).innerHTML = "";
document.getElementById("Div"+resultNodeID).appendChild(newDoc);
t = document.msg_form.TextareaTest.value;
document.msg_form.TextareaTest.value =t + df.appendChild(cloneDoc);
}
}
</script>
</head><body>
<form name="msg_form">
<ul>
<li>
<input type="button" value="Menu" onclick="tramsformlists('test0.xml','test0.xsl','Test')"><br>
<div id="DivTest"></div>
<textarea cols="50" rows="10" id="TextareaTest">あああああああ</textarea>
</li>
</ul>
</form>
</body></html>
--test0.xml--
<?xml version="1.0" encoding="utf-8"?>
<root>
<nolink_logo>
</nolink_logo>
</root>
--test0.xsl--
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8"/>
<xsl:template match="root">
<xsl:apply-templates select="nolink_logo"/>
</xsl:template>
<xsl:template match="nolink_logo">
<xsl:call-template name="Test" />
</xsl:template>
<xsl:template name="Test">
<xsl:variable name="menu" select="document('test1.xml')/root"/>
<div>画像を表示
<xsl:for-each select="$menu">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="url[1]"/>
</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="img[1]"/>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>
--test1.xml--
<?xml version="1.0" encoding="utf-8"?>
<root>
<img>http://domain/image2.gif</img>
<url>http://domain/test.html</url>
</root>
補足
回答ありがとうございます。 説明不足で申し訳ございません。 以下の試験を受けるためです。 http://www.microsoft.com/japan/learning/mcp/exam.aspx?cert=1&id=70-320 内容を読んでも恥ずかしいことながら自分ではよくわかっておりません。 もし、これを読むと参考になるよというのがありましたら、よろしくお願いします。