Signatur
Beschreibung
createHTMLDocument() wird über document.implementation aufgerufen und erzeugt ein vollständig neues HTML-Dokument. Es ist nicht an das aktuelle Fenster gebunden. Das neue Dokument enthält bereits einen Doctype sowie die Elemente <html>, <head> und <body>. Wenn Sie einen Titel übergeben, wird zusätzlich ein <title>-Element im <head> angelegt.
Das Dokument ist inert: Es hat keinen Browsing-Kontext (defaultView ist null). Skripte werden darin nicht ausgeführt, und Ressourcen wie Bilder oder Stylesheets werden beim Einfügen per innerHTML in der Regel nicht geladen. Deshalb eignet sich die Methode gut, um HTML-Fragmente zu parsen, zu analysieren oder zu bereinigen, bevor sie in das sichtbare Dokument übernommen werden.
Typische Einsatzfälle:
- HTML-Strings in einer isolierten Umgebung parsen und durchsuchen
- Dokumente für Druckansichten, Exporte oder
iframe-Inhalte zusammenbauen - Tests, die ein eigenes, sauberes Dokument benötigen
Um Knoten aus dem neuen Dokument in das aktuelle zu übernehmen, verwenden Sie document.importNode() oder document.adoptNode(). Bei appendChild() übernehmen moderne Browser die Knoten zwar automatisch, der explizite Weg ist aber besser lesbar.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $title | string | Optionaler Dokumenttitel. Wird er angegeben, entsteht ein <title>-Element mit diesem Text. Lassen Sie ihn weg, gibt es kein <title>-Element. Ein leerer String "" erzeugt ein leeres <title>. |
Rückgabewert
Document mit Doctype, <html>, <head>, <body> und je nach Argument einem <title>.Beispiele
Neues Dokument erstellen und Inhalt einfügen
const doc = document.implementation.createHTMLDocument('Bericht');
const h1 = doc.createElement('h1');
h1.textContent = 'Monatsbericht';
doc.body.append(h1);
console.log(doc.title);
console.log(doc.documentElement.outerHTML);HTML-String isoliert parsen und Links auslesen
const html = '<p>Siehe <a href="https://example.com">Beispiel</a> und <a href="/kontakt">Kontakt</a></p><img src="x" onerror="alert(1)">';
const doc = document.implementation.createHTMLDocument();
doc.body.innerHTML = html; // onerror wird im inerten Dokument nicht ausgeführt
const links = [...doc.querySelectorAll('a')].map((a) => a.getAttribute('href'));
console.log(links);
console.log(doc.defaultView);Dokument vorbereiten und in ein iframe übertragen
const iframe = document.createElement('iframe');
document.body.append(iframe);
const vorlage = document.implementation.createHTMLDocument('Vorschau');
const p = vorlage.createElement('p');
p.textContent = 'Hallo aus dem neuen Dokument!';
vorlage.body.append(p);
const ziel = iframe.contentDocument;
const neuerRoot = ziel.importNode(vorlage.documentElement, true);
ziel.replaceChild(neuerRoot, ziel.documentElement);
console.log(ziel.title);Knoten ins aktuelle Dokument übernehmen
const temp = document.implementation.createHTMLDocument();
temp.body.innerHTML = '<ul><li>Eins</li><li>Zwei</li></ul>';
const liste = document.importNode(temp.querySelector('ul'), true);
document.body.append(liste);
console.log(liste.ownerDocument === document);// Wichtig · Fallstricke
Sicherheit: Das inerte Dokument führt keine Skripte aus. Das schützt Sie aber nicht, sobald Sie die Knoten in das echte Dokument übernehmen: Event-Handler-Attribute wie onerror oder javascript:-URLs werden dann aktiv. Bereinigen Sie nicht vertrauenswürdiges HTML vorher, z. B. mit DOMPurify oder der Sanitizer-API, wo sie verfügbar ist. Behandeln Sie die Methode nicht als XSS-Schutz.
Parameter weglassen oder leer übergeben: Ohne Argument entsteht kein <title>-Element. Mit \"\" entsteht ein leeres <title>-Element. Ältere Browser (vor allem der alte Internet Explorer) verlangten den Parameter zwingend.
Kein Browsing-Kontext: doc.defaultView ist null. Deshalb sind getComputedStyle(), Layout-Werte wie offsetWidth und Timer an diesem Dokument nicht sinnvoll nutzbar.
Alternativen: Für das reine Parsen von Strings ist new DOMParser().parseFromString(html, 'text/html') oft kürzer. Für ein XML-Dokument verwenden Sie createDocument(). Für wiederverwendbare Vorlagen eignet sich <template>.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workern nicht. In Node.js gibt es die Methode nur über DOM-Implementierungen wie jsdom.