The transformToFragment() method of the XSLTProcessor interface transforms a provided Node source to a DocumentFragment using the XSLT stylesheet associated with the XSLTProcessor.
transformToFragment(source, document)sourceThe Node source to apply the XSLT stylesheet to.
documentThe Document the document fragment will be associated with. (Any document fragment is associated with a document it can be added to).
This example demonstrates how to use transformToFragment() to transform XML data into HTML, which can then be directly inserted into the DOM as a document fragment.
<div id="result"></div>const xmlString = `
<books>
<book>
<title>Book 1</title>
<author>Author 1</author>
</book>
<book>
<title>Book 2</title>
<author>Author 2</author>
</book>
</books>
`;
const xsltString = `
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<ul>
<xsl:for-each select="books/book">
<li>
<strong><xsl:value-of select="title"/></strong>
by <em><xsl:value-of select="author"/></em>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const xsltDoc = parser.parseFromString(xsltString, "application/xml");
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);
// Perform the transformation, returning the result as a document fragment
const resultFragment = xsltProcessor.transformToFragment(xmlDoc, document);
// Insert the result into the page
document.getElementById("result").appendChild(resultFragment);