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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transformToFragment |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.