Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function makeDOM(o,to){
            var ele = document.createElement(o.element);
            for (var prop in o.props) {
              ele.setAttribute(prop, o.props[prop]);
           }
           ele.innerHTML = o.contents;
           return ele;
        }
(function( $, undefined ) {

//el can be one of two things:
// 1. { tagname: [ { attr: value, ... }, [ children ]] }
// 2. "a string"
function mkEl( el ) {
        var ret, key, attr, children, child;

        if ( $.type( el ) === "string" ) {
                ret = document.createTextNode( el );
        } else {
                for ( key in el ) {
                        ret = document.createElement( key );
                        for( attr in el[ key ][ 0 ] ) {
                                ret.setAttribute( attr, el[ key ][ 0 ][ attr ] );
                        }
                        children = mkChildren( el[ key ][ 1 ] );
                        for( child in children ) {
                                ret.appendChild( children[ child ] );
                        }
                }
        }

        return ret;
}

function mkChildren( c ) {
        var ret = [], idx;

        for ( idx in c ) {
                ret.push( mkEl( c[ idx ] ) );
        }

        return ret;
}

$.createDom = function( j ) {
        return ( ( $.type( j ) === "object" ) ? mkEl( j ) :
                ( ( $.type( j ) === "array" ) ? mkChildren( j ) :
                        undefined ) );
};

})( jQuery );
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$("<a id='foo' class='foo' href='/foobar.html'><span class='bar'>foo</span></a>").appendTo('body');
$(".foo").remove();

var linkElement = document.createElement( 'a' );
linkElement.href = '/foobar.html';
linkElement.className = "foo";
linkElement.id = "linkid";
linkElement.innerHTML = "<span class='bar'>foo</span>";
$( linkElement ).appendTo( "body" );
$(".foo").remove();

var ele = {
        'a':[
              {
                'id':"foo",
                'class':'foo',
                'href':'/foobar.html'
              },[{"span":[{class:'bar'},["foo"]]}]]
        }
          $($.createDom(ele)).appendTo('body');
$(".foo").remove();

var ele = makeDOM({
      "element":"a",
      "props":{
        "className":"foo",
        "href":"/foobar.html",
        "id":"linkid"
      },
      "contents":"<span class='bar'>foo</span>"
    },"body");
$(ele).appendTo('body');
$(".foo").remove();

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Alexander Schmitz on 4th January 2013
• Revision 2: published by Alexander Schmitz on 11th January 2013
• Revision 3: published by Alexander Schmitz on 11th January 2013
• Revision 4: published by Gabriel Schulhof on 11th January 2013
• Revision 5: published by Alexander Schmitz on 15th January 2013

0 comments