Converting Range or DocumentFragment to string
To spell out an example from here:
//Example setup of a fragment
var frag = document.createDocumentFragment(); //make your fragment
var p = document.createElement('p'); //create <p>test</p> DOM node
p.textContent = 'test';
frag.appendChild( p );
//Outputting the fragment content using a throwaway intermediary DOM element (div):
var div = document.createElement('div');
div.appendChild( frag.cloneNode(true) );
console.log(div.innerHTML); //output should be '<p>test</p>'
FWIW, the jQuery way:
$('<div>').append(fragment).html()
So, how to get the string of the html of a Range or DocFrag?
Contrary to the other responses, it is possible to directly turn a DocumentFragment object into a DOMString using the XMLSerializer.prototype.serializeToString method described at https://w3c.github.io/DOM-Parsing/#the-xmlserializer-interface.
To get the DOMString of a Range object, simply convert it to a DocumentFragment using either of the Range.prototype.cloneContents or Range.prototype.extractContents methods and then follow the procedure for a DocumentFragment object.
I've attached a demo, but the gist of it is in these two lines:
const serializer = new XMLSerializer();
const document_fragment_string = serializer.serializeToString(document_fragment);
(() => {
"use strict";
const HTML_namespace = "http://www.w3.org/1999/xhtml";
document.addEventListener("DOMContentLoaded", () => {
/* Create Hypothetical User Range: */
const selection = document.defaultView.getSelection();
const user_range_paragraph = document.getElementById("paragraph");
const user_range = document.createRange();
user_range.setStart(user_range_paragraph.firstChild, 0);
user_range.setEnd(user_range_paragraph.lastChild, user_range_paragraph.lastChild.length || user_range_paragraph.lastChild.childNodes.length);
selection.addRange(user_range);
/* Clone Hypothetical User Range: */
user_range.setStart(selection.anchorNode, selection.anchorOffset);
user_range.setEnd(selection.focusNode, selection.focusOffset);
const document_fragment = user_range.cloneContents();
/* Serialize the User Range to a String: */
const serializer = new XMLSerializer();
const document_fragment_string = serializer.serializeToString(document_fragment);
/* Output the Serialized User Range: */
const output_paragraph = document.createElementNS(HTML_namespace, "p");
const output_paragraph_code = document.createElementNS(HTML_namespace, "code");
output_paragraph_code.append(document_fragment_string);
output_paragraph.append(output_paragraph_code);
document.body.append(output_paragraph);
}, { "once": true });
})();<p id="paragraph">Hello <b>World</b></p>