JSFiddle - React, Tailwind, and code Playground

by piotr_cz

JavaScript

/**
 * Allow Elements.from return textNodes.
 *
 * Motivation: 
 * - client-side templating, when one would like to render html string containing non-elements
 *
 * Drawbacks: 
 * - naming convention. Elements.from would be able to return a 'collection', not 'elements'
 *
 * Info:
 * - https://developer.mozilla.org/en/childNodes
 * 
 * Browser support for childnodes:
 * - http://www.quirksmode.org/dom/w3c_core.html#t70
 * - http://reference.sitepoint.com/javascript/Node/childNodes
 */

var text = '<i>element</i> and a textNode',
    elementsFromNative,
    elementsFromPatched
;

// see Mootools.more: Elements.from
Elements.fromPatched = function(text, excludeScripts, asCollection){
    if (excludeScripts || excludeScripts == null) text = text.stripScripts();
    
    var container, wrapper, elements = new Elements();
    
    // Table parsing probably stays similar... modifies container variable
    
    wrapper = (container || new Element('div')).set('html', text);
    
    if (asCollection)
        return wrapper.childNodes;
    
    return wrapper.getChildren();
}

// use document.createDocumentFragment as in http://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript
Elements.fromFragment = function( text, excludeScripts, asCollection ){
    var frag = document.createDocumentFragment(),
        temp = document.createElement( 'div' )
    ;

    temp.innerHTML = text;

    while( temp.firstChild )
    {
        frag.appendChild( temp.firstChild );
    }
        
    return frag;
}

elementsFromNative = Elements.from( text );
elementsFromPatched = Elements.fromPatched( text, false, true );
elementsFromFragment = Elements.fromFragment( text, false, true );

console.clear();

// Native
console.log( 'native: ',
    // [ b ]
    elementsFromNative,
    // 1
    elementsFromNative.length,
    // elements
    typeOf( elementsFromNative ),
    // element
    typeOf( elementsFromNative[0] ),
    // null
    typeOf( elementsFromNative[1] )
);

//...