W3cubDocs

/Web APIs

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

transformToFragment(source, document)

Parameters

source: The Node source to apply the XSLT stylesheet to.
document: The Document the document fragment will be associated with. (Any document fragment is associated with a document it can be added to).

Return value

A DocumentFragment.

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

<div id="result"></div>

JavaScript

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> # dom-xsltprocessor-transformtofragment>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`transformToFragment`	1 Chrome returns `null` if an error occurs.	12 Edge returns `null` if an error occurs.	1 Firefox throws an exception if an error occurs.	≤12.1 ["Opera 12.1 and earlier throws an exception if an error occurs.", "Opera 15 and later returns `null` if an error occurs."]	3.1 Safari returns `null` if an error occurs.	18 Chrome Android returns `null` if an error occurs.	4 Firefox for Android throws an exception if an error occurs.	≤12.1 ["Opera Android 12.1 and earlier throws an exception if an error occurs.", "Opera Android 14 and later returns `null` if an error occurs."]	2 Safari on iOS returns `null` if an error occurs.	1.0 Samsung Internet returns `null` if an error occurs.	3 WebView returns `null` if an error occurs.	2 WebView on iOS returns `null` if an error occurs.