Edit in JSFiddle

var NUMS_COUNT = 10000; // Count of testing elements
var TEST_ARR = Array.apply(null, { length: NUMS_COUNT }).map(Number.call, Number); // Create test array

function test1() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var p, c, a, testArea = document.getElementById("testArea");
	for (var i=0; i<TEST_ARR.length; i++) {
		p = document.createElement("p");
		p.setAttribute("class", "testClass");
		p.appendChild(document.createTextNode("Testing paragraph "));
		c = document.createElement("code");
		c.appendChild(document.createTextNode("#" + TEST_ARR[i]));
		p.appendChild(c);
		p.appendChild(document.createTextNode(" with "));
		a = document.createElement("a");
		a.setAttribute("href", "#");
		a.appendChild(document.createTextNode("anchor"));
		p.appendChild(a);
		p.appendChild(document.createTextNode("."));
		testArea.appendChild(p);
	}
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test1a() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var p, c, a, testArea = document.getElementById("testArea");
	for (var i=0; i<TEST_ARR.length; i++) {
		p = document.createElement("p");
		p.setAttribute("class", "testClass");
		p.appendChild(document.createTextNode("Testing paragraph "));
		c = document.createElement("code");
		c.appendChild(document.createTextNode("#" + TEST_ARR[i]));
		p.appendChild(c);
		p.appendChild(document.createTextNode(" with "));
		a = document.createElement("a");
		a.setAttribute("href", "#");
		a.appendChild(document.createTextNode("anchor"));
		p.appendChild(a);
		p.appendChild(document.createTextNode("."));
		p.addEventListener("click", function(e) { alert(e.targetNode.innerHTML); });
		testArea.appendChild(p);
	}
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test2() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var p, c, a, f = document.createDocumentFragment();
	for (var i=0; i<TEST_ARR.length; i++) {
		p = document.createElement("p");
		p.setAttribute("class", "testClass");
		p.appendChild(document.createTextNode("Testing paragraph "));
		c = document.createElement("code");
		c.appendChild(document.createTextNode("#" + TEST_ARR[i]));
		p.appendChild(c);
		p.appendChild(document.createTextNode(" with "));
		a = document.createElement("a");
		a.setAttribute("href", "#");
		a.appendChild(document.createTextNode("anchor"));
		p.appendChild(a);
		p.appendChild(document.createTextNode("."));
		f.appendChild(p);
	}
	document.getElementById("testArea").appendChild(f);
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test2a() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var p, c, a, f = document.createDocumentFragment();
	for (var i=0; i<TEST_ARR.length; i++) {
		p = document.createElement("p");
		p.setAttribute("class", "testClass");
		p.appendChild(document.createTextNode("Testing paragraph "));
		c = document.createElement("code");
		c.appendChild(document.createTextNode("#" + TEST_ARR[i]));
		p.appendChild(c);
		p.appendChild(document.createTextNode(" with "));
		a = document.createElement("a");
		a.setAttribute("href", "#");
		a.appendChild(document.createTextNode("anchor"));
		p.appendChild(a);
		p.appendChild(document.createTextNode("."));
		p.addEventListener("click", function(e) { alert(e.targetNode.innerHTML); });
		f.appendChild(p);
	}
	document.getElementById("testArea").appendChild(f);
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test3() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var h = "";
	for (var i=0; i<TEST_ARR.length; i++) {
		h += '<p>Testing paragraph <code>#' + TEST_ARR[i] + '</code> with <a href="#">anchor</a>.</p>';
	}
	document.getElementById("testArea").innerHTML = h;
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test4() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var h = "";
	for (var i=0; 
	    i<TEST_ARR.length; 
	    h += '<p>Testing paragraph <code>#' + (TEST_ARR[i++]) + '</code> with <a href="#">anchor</a>.</p>');
	document.getElementById("testArea").innerHTML = h;
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

function test5() {
	document.getElementById("testArea").innerHTML = "";
	var end, start = new Date();
	var h = '<p>Testing paragraph <code>#' + TEST_ARR.join('</code> with <a href="#">anchor</a>.</p><p>Testing paragraph <code>#') + '</code> with <a href="#">anchor</a>.</p>';
	document.getElementById("testArea").innerHTML = h;
	end = new Date();
	alert("Test #1 tooks " + (end.getTime() - start.getTime()) + " miliseconds.");
}

<h1>DOM Insertion test</h1>
<div>
	<button id="btn1" onclick="test1();">Simple (one by one) insertion</button>
	<button id="btn1a" onclick="test1a();">Simple (one by one) insertion with event handler</button>
	<button id="btn2" onclick="test2();">Using document fragment</button>
	<button id="btn2a" onclick="test2a();">Using document fragment with event handler</button>
	<button id="btn3" onclick="test3();">Using insertHTML #1</button>
	<button id="btn4" onclick="test4();">Using insertHTML #2</button>
	<button id="btn5" onclick="test5();">Using insertHTML #3</button>
</div>
<div id="testArea"></div>