XSLTProcessor: transformToFragment() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The transformToFragment()
method of the XSLTProcessor
interface transforms a provided Node
source to a DocumentFragment
using the XSLT stylesheet associated with the XSLTProcessor
.
Syntax
js
transformToFragment(source, document)
Parameters
Return value
Examples
Using transformToFragment()
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.
HTML
html
<div id="result"></div>
JavaScript
js
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);
Result
Specifications
Specification |
---|
DOM Standard # dom-xsltprocessor-transformtofragment |
Browser compatibility
BCD tables only load in the browser