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>
お礼
ありがとうございます。 解説書を参考にさせて頂きました。