Implementing a New Document

document.implementation.createHTMLDocument(title) builds a complete, empty HTML document (doctype, <head> with <title>, <body>) that has no window. It is inert (scripts do not run, images do not load), so it works as an off-screen scratch space. To bring nodes into the page, importNode(node, true) clones them (the deep argument defaults to false) and adoptNode(node) moves them.

Building content in an inert documentJavaScript

const doc = document.implementation.createHTMLDocument('Report');
doc.body.innerHTML = '<h1>Q3 sales</h1><p>Up 12%</p><script>alert(1)<\/script>';
console.log(doc.title, doc.body.children.length, doc.defaultView);    // no window: inert
const copy = document.importNode(doc.querySelector('h1'), true);        // clone into this page
document.body.append(copy, document.adoptNode(doc.querySelector('p')));  // move
console.log(copy.ownerDocument === document, doc.body.children.length);

Output

Report 3 null
true 2

MENU

Implementing a New Document