Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow building document fragments

See original GitHub issue

It’d be really useful to be able to build document fragments, not only whole HTML documents. Is that possible? This is a feature that’s common in parse-side libraries, like Parse5, which leads me to think it’s not a spec issue, just that it hasn’t been implemented yet.

More specifically, it’d be useful to be able to do something like:

var doc = domino.createDocumentFragment("<div></div>");
doc.childNodes[0].innerHTML = "Hi";
console.log(doc.documentElement.outerHTML);  // "<div>Hi</div>";

Currently, if you try to do this (with createDocument) you get extra <html>, <head> and <body> tags wrapped around your content.

Is that possible? I’d be happy to have a go at implementing it, if you can point me in the right direction.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
pimterrycommented, Mar 23, 2016

Ah, ok, makes sense. Great to hear <template> is coming in soon!

A fairly easy solution should be to implement the setter for DocumentFragment.innerHTML which if I remember it correctly used to throw a not yet implemented error.

Currently fragment.innerHTML doesn’t exist at all, probably because it also doesn’t exist (as a getter or setter) in browsers either. DocumentFragments have a pretty terrible API.

domino generally provides outerHTML as a serialization method, even on objects (like Document) which don’t have this in the WHATWG spec.

Not on document fragments interestingly. That’d be a helpful addition! That’s actually probably the most important part from my point of view. In a browser context if you want to serialize a fragment you have to use XMLSerializer, but of course that’s not a built-in in Node, so it gets quite a bit more difficult.

I think this means, if I want to do this, I need to do:

var domino = require("domino");

var document = domino.createDocument()
var template = document.createElement("template");
template.innerHTML = "<div></div>";

var fragment = template.content;
// Make whatever changes I want

console.log(fragment.outerHTML);

That’s manageable from my point of view. This is once template support comes in, and assuming you’re happy to add outerHTML to document fragments?

0reactions
cscottcommented, Apr 5, 2016

Incidentally, in your example, you can use template.innerHTML as a standards-compliant alternative to fragment.outerHTML.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Docs fragments - Ansible Documentation
Docs fragments allow you to document common parameters of multiple plugins or modules in a single place. Enabling docs fragments .
Read more >
HTML DOM Document createDocumentFragment() - W3Schools
The createDocumentFragment() method creates an offscreen node. The offscreen node can be used to build a new document fragment that can be insert...
Read more >
Document.createDocumentFragment() - Web APIs | MDN
Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree. Syntax. createDocumentFragment()
Read more >
Certain elements not allowed in DocumentFragment?
A document fragment is meant to be a piece of a document, not an entire document - thus you should not have <body>...
Read more >
Why You Should Use Document Fragments - Webtips
The most common use case you will find is when you need to construct a DOM subtree through JavaScript. For this, you can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

NotYetImplemented error in HTMLCanvasElement

Next page

ESM struggle