Appending HTML element with attributes

JavaScript performance comparison

Revision 14 of this test case created by

Preparation code

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

<div id="screenshots"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var link = "something.html";
  var title = "Some Title";
  var el = "someImg.png";
  
  var data = { 
   'link': "something.html",
   'title': "Some Title",
   'el': "someImg.png"
  };
  
  var domReference = document.getElementById("screenshots");
  var jqReference = $('#screenshots');
  
  var template = '<a href="{{ link }}" title="{{ title }}"><img src="{{ el }}" alt="" width="200px" height="200px"></a>';
  
  function DOM(elem, attrs) {
    var elem = document.createElement(elem);
    for (var attr in attrs) {
      elem[attr] = attrs[attr];
    }
    return elem;
  }
  var isObject = function(o) {
    return typeof o === "object";
  };
  var isFunction = function(o) {
    return typeof o === "function";
  };
  var isString = function(o) {
    return typeof o === "string";
  };
  
  function mknode(tag, attrs, content) {
    var node = document.createElement(tag);
    var args = arguments,
      content;
    if (args.length > 1) {
      if (isObject(args[1])) {
        for (var i in args[1]) {
          if (!isFunction(args[1][i]))
            node.setAttribute(i, args[1][i])
        }
      } else
      if (isString(args[1]))
        content = args[1];
      if (isString(args[2]))
        content = args[2];
    }
    if (content)
      node.innerHTML = content;
  
    return node;
  }
  
  var timLiteCached = function() {function i(b,e){return b.replace(m,function(g,c){for(var j=c.split("."),k=j.length,h=e,f=0;f<k;f++){h=h[j[f]];if(f===k-1)return h}})}var m=RegExp("{{\\s*([a-z0-9_][\\.a-z0-9_]*)\\s*}}","gi"),d={},l=window.JSON;return l?function(b,e){var g=l.stringify(e),c=d[b]&&d[b][g];if(c)return c;d[b]||(d[b]={});return c=d[b][g]=i(b,e)}:i}();

};

Benchmark.prototype.teardown = function() {
    $("#screenshots").empty();
  

};
</script>

Preparation code output

<div id="screenshots"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Original Code
jqReference.append('<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200px" height="200px"></a>');
pending…
jq DOM scripting
jqReference.append(
  $("<a>").attr({ 'href': link, 'title': title }).append(
    $("<img>").attr({ 'src': el, 'alt': '','width': '200', 'height': '200'})));
pending…
getElementById append
jqReference.append('<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
mknode()
jqReference.append(
  mknode('a', {
    'href': link,
    'title': title
  }, '<img src="' + el + '" alt="" width="200" height="200">'));
pending…
jq DOM scripting2
jqReference.append(
  $("<a>", { 'href': link, 'title': title }).append(
    $("<img>", { 'src': el, 'alt': '','width': '200', 'height': '200'})));
pending…
tim Template
jqReference.append(timLiteCached(template, data));
pending…
mknode 2
jqReference.append(
 mknode('a', { 'href': link, 'title': title }).appendChild(
  mknode('img', { 'src': el, 'alt': '', 'width': '200', 'height': '200'})
 )
);
pending…
Create Element1
var n = document.createElement("a");
n.href = link; n.title = title;
n.innerHTML = '<img src="' + el + '" alt="" width="200" height="200">';
jqReference.append(n);
pending…
Create Element2
var n = document.createElement("a");
n.href = link; n.title = title;
n.innerHTML = '<img src="' + el + '" alt="" width="200" height="200">';
domReference.appendChild(n);
pending…
insertAdjacentHTML 2
jqReference[0].insertAdjacentHTML("beforeend", '<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
insertAdjacentHTML native
domReference.insertAdjacentHTML("beforeend", '<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
mkDOM
jqReference.append(
 DOM('a', { 'href': link, 'title': title }).appendChild(
  DOM('img', { 'src': el, 'alt': '', 'width': '200', 'height': '200'})
 )
);
pending…
Plain DOM
var anchor = document.createElement("a");
anchor.href = link;
anchor.title = title;
var img = document.createElement("img");
img.src = el;
img.alt = "";
img.width = 200;
img.height = 200;
anchor.appendChild(img);
domReference.appendChild(anchor);
pending…
Plain DOM with setAttribute
var anchor = document.createElement("a");
anchor.setAttribute("href",link);
anchor.setAttribute("title",title);
var img = document.createElement("img");
img.setAttribute("src",el);
img.setAttribute("alt","");
img.setAttribute("width","200");
img.setAttribute("height","200");
anchor.appendChild(img);
domReference.appendChild(anchor);
pending…

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.

0 Comments