Editing innerHTML vs jQuery vs createElement() and appendChild() This edit will create a new revision. Your details (optional) Name Email (won’t be displayed; might be used for Gravatar) URL Test case details Title * Published (uncheck if you want to fiddle around before making the page public) Description (in case you feel further explanation is needed)(Markdown syntax is allowed) Compares the performance of adding elements to the DOM by using strings and innerHTML, creating the DOMElement node tree and appending with appendChild(), and using jQuery to replace content with $elm.html(). Are you a spammer? (just answer the question) Preparation code Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <!-- Existing DOM elements into which the tests will append new content --> <div id="parent-inject">Replace me via <code>elm.innerHTML()</code></div> <hr/> <div id="parent-create">Replace me via <code>elm.appendChild()</code></div> <hr/> <div id="parent-jquery">Replace me via <code>$elm.html()</code></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script> Define setup for all tests (variables, functions, arrays or other objects that will be used in the tests) (runs before each clocked test loop, outside of the timed code region) (e.g. define local test variables, reset global variables, clear canvas, etc.) (see FAQ) /*** * Create a realistic, level playing field by storing references to container * elements beforehand, as you would likely do in a real webapp. ***/ // Existing DOM elements into which the tests will append new content var parentInject = document.getElementById('parent-inject'); var parentCreate = document.getElementById('parent-create'); var $parentJQuery = $('#parent-jquery'); // This content string is assigned to a variable in each loop of each test. var contentString1 = '<div class="test" onmousemove="myFunction(' var contentString2 = ')"><h1>This is a test</h1><p>This is only a test</p></div>'; Define teardown for all tests (runs after each clocked test loop, outside of the timed code region) (see FAQ) Code snippets to compare Test 1 Title Async (check if this is an asynchronous test) Code // Initialize the new content string. Assigns the string to a local variable to be more realistic (e.g. you'd likely do the same with the response body of an AJAX call). var content = contentString1 + Math.random() + contentString2; // Inject the new content parentInject.innerHTML = content; Test 2 Title Async (check if this is an asynchronous test) Code // Remove the old content var childNodes = parentCreate.childNodes, i = 0, len = childNodes.length; for (i; i < len; ++i) { parentCreate.removeChild(childNodes[i]); } // Construct the new content var div = document.createElement('div'); div.className = 'test'; div.onmousemove = function(){myFunction(Math.random())}; var h1 = document.createElement('h1'); var text = document.createTextNode('This is a test'); var p = document.createElement('p'); var text2 = document.createTextNode('This is only a test'); h1.appendChild(text); p.appendChild(text2); div.appendChild(h1); div.appendChild(p); // Insert the new content parentCreate.appendChild(div); Test 3 Title Async (check if this is an asynchronous test) Code // Initialize the new content string. Assigns the string to a local variable to be more realistic (e.g. you'd likely do the same with the response body of an AJAX call). var content = contentString1 + Math.random() + contentString2; // Inject the new content $parentJQuery.html(content);