[FeatureRequest] allow DocumentFragment as an argument for DOM.create() and others

[mrzafod]

Is it possible to use a DocumentFragment type argument for DOM.create, $Element.after and etc? Now I am on the way with rendering really large lists and DocumentFragment is much more cheaper for the issue. More over DocumentFragment-way is a native feature that supports in zepto & jquery well

[chemerisuk]

Hi Roman. Could you describe your use case in more detail? I have several thoughts and need to pick the right one depending on your requirements.

[mrzafod]

Hi Maksim. Guess the example could explain

var docfrag = document.createDocumentFragment();
// some stuff
DOM.find("section").after(docfrag)

Now it works well with a little fix

// added value.nodeType === 11 for documentFragment
DOM.create = function(value, varMap) {
    if (value.nodeType === 1 || value.nodeType === 11) return $Element(value);
// [...]

and then

var docfrag = document.createDocumentFragment();
// some stuff
DOM.find("section").after(DOM.create(docfrag))

[chemerisuk]

While you code works in this case it has one issue. Document fragments are very different from regular elements, and this fact could be confusing. For instance, innerHTML property doesn't work for them etc. That's why several versions ago I removed support for passing document fragments into DOM.create. But the library uses them internally for manipulating by elements: https://github.com/chemerisuk/better-dom/blob/master/src/element.manipulation.js#L22.

With Emmet expressions it's very easy to generate a large number of elements and make a collection wrapper:

var lis = DOM.create("li*1000"); // creates 1000 <li> in memory and make a collection wrapper

Using each method you can modify element attributes, text etc (but better to pass them into Emmet expression if possible). Then if you pass such object into any manipulation method the library will internally use a document fragment to attach them effectively, so:

DOM.find("section").after(lis); // inserts 1000 <li>s after the section

That's why I was asking what exactly do you do with these <li> elements. Or you just want to insert them effectively?

[mrzafod]

 if (!value) value = document.createDocumentFragment();
arg.legacy(function(node) { value.appendChild(node) });

looks great! thanks! the best one I have ever used!

[chemerisuk]

No problem. One of the goals of better-dom is to hide native APIs completely, because they are ineffective, confusing, buggy etc. So in normal scenarios you should never use native APIs. If you have to just let me know about such use case.