Preparation code

<div id="content" style="display:none">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://underscorejs.org/underscore.js">
</script>
<script>
  function HTMLObject(e) {
    this.tag = e || "div";
    this.id = "";
    this.className = [];
    this.content = []
  }
  var prototype = HTMLObject.prototype;
  prototype.set = function(e, t) {
    if ($.type(t) === "string") {
      t = $.trim(t);
      if (e === "tag" && t.length === 0) return this
    }
    $.type(this[e]) === $.type(t) && (this[e] = t);
    return this
  };
  prototype.get = function(e) {
    return this[e]
  };
  prototype.addClass = function(e) {
    var t = this,
        n = e;
    n = $.trim(n).split(" ");
    $.each(n, function(e, n) {
      n = $.trim(n);
      t.className.indexOf(n) === -1 && t.className.push(n)
    });
    return this
  };
  prototype.removeClass = function(e) {
    var t = this,
        n = $.trim(e).split(" ");
    $.each(n, function(e, n) {
      t.className = _.without(t.className, $.trim(n))
    });
    return this
  };
  prototype.toggleClass = function(e, t) {
    if ($.type(t) === "boolean") t ? this.addClass(e) : this.removeClass(e);
    else {
      var n = this,
          r = $.trim(e).split(" ");
      $.each(r, function(e, t) {
        n.className.indexOf(t) === -1 ? n.addClass(t) : n.removeClass(t)
      })
    }
    return this
  };
  prototype.append = function() {
    var e = this;
    $.each(arguments, function(t, n) {
      var r = !1;
      $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0);
      r && e.content.push(n)
    });
    return this
  };
  prototype.prepend = function() {
    var e = this;
    $.each(arguments, function(t, n) {
      var r = !1;
      $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0);
      r && e.content.unshift(n)
    });
    return this
  };
  prototype.appendTo = function(e) {
    $.type(e) === "object" && $.type(e.append) === "function" && e.append(this)
  };
  prototype.empty = function() {
    this.content.length = 0;
    return this
  };
  prototype.toString = function() {
    var e = this.renderOpenTag(),
        t = this.renderCloseTag(),
        n = this.renderContent();
    return [e, n, t].join("")
  };
  prototype.renderOpenTag = function() {
    var e = ["<", this.tag, ">"];
    this.id.length > 0 && e.splice(e.length - 1, 0, ' id="' + this.id + '"');
    this.className.length > 0 && e.splice(e.length - 1, 0, ' class="' + this.className.join(" ") + '"');
    return e.join("")
  };
  prototype.renderContent = function() {
    var e = this,
        t = [];
    this.content.length > 0 && $.each(this.content, function(e, n) {
      var r = $.type(n);
      r === "string" ? t.push(n) : n instanceof HTMLObject && t.push(n.toString())
    });
    return t.join("")
  };
  prototype.renderCloseTag = function() {
    return ["</", this.tag, ">"].join("")
  };
</script>
<script>
  var newElement, $newElement, $content;
  newElement = function(element) {
    return document.createElement(element);
  }
  $newElement = function(element) {
    return $(document.createElement(element));
  }
  $(function() {
    $content = $('content');
  });
</script>
<script>
  Benchmark.prototype.teardown = function() {
    $content.empty();
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

var $div = $newElement('div'),
    $strong = $newElement('strong'),
    string = 'test';

$strong.append(string);
$div.append($strong);
$content.append($div);

var $div = new HTMLObject('div'),
    $strong = new HTMLObject('strong'),
    string = 'test';

$strong.append(string);
$div.append($strong);
$content.append($div.toString());

var string = 'test';

$content.append(['<div>', '<strong>', string, '</strong>', '</div>'].join(''));

var string = 'test';

$content.append("<div><strong>" + string + "</strong></div>");

var fragment = document.createDocumentFragment(),
    string = "test";
fragment.innerHTML = "<div><strong>" + string + "</strong></div>";
$content.append(fragment);

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 on 25th January 2013 and last updated on 26th January 2013
• Revision 2: published on 30th January 2013
• Revision 3: published by Raul on 1st February 2013

0 comments