将XSL标记附加到HTML DOM元素

时间:2017-05-23 12:52:26

标签: javascript html xslt

如果我有一个空的XSL文档,如下所示:

<body>
   <div id="myList">

   </div>
</body>

如何访问div标签并将XSL附加到它?例如,我想在我的js代码中执行以下操作,但它不会输出任何内容。但是如果我手动将innerHTML值插入div标签,它就可以工作:

document.getElementById("myList").innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`

我尝试过使用不同的引用样式,但我似乎无法获得预期的输出。有没有办法解决这个问题?

1 个答案:

答案 0 :(得分:1)

假设您有一个XSLT样式表作为XML DOM文档和一个支持innerHTML XML元素的浏览器的最新版本(我已经使用当前版本的Chrome,Firefox和Edge在Windows 10 Creators Update上成功测试过)你可以使用例如

var xslString = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="Root">
   <div id="myList">

   </div>  
  </xsl:template>

</xsl:stylesheet>`;

var xmlString = `<Root>
  <Movies>
     <Authors>
       <FirstName>Steven</FirstName>
     </Authors>
  </Movies>
</Root>`;

var domParser = new DOMParser();

var xsltDoc = domParser.parseFromString(xslString, 'application/xml');

var xmlDoc = domParser.parseFromString(xmlString, 'application/xml');

var div = xsltDoc.querySelector('#myList');

div.innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`;

var proc = new XSLTProcessor();
proc.importStylesheet(xsltDoc);

document.getElementById('result').appendChild(proc.transformToFragment(xmlDoc, document));
<section>
  <h1>Result</h1>
  <div id="result"></div>
</section>