innerHTML | var html = '<strong>Some html here</strong><p>Lorem ipsum</p><div><ul><li>List</li><li>Item</li></ul></div>';
el.innerHTML = html;
| ready |
appendChild and textContent | var frag = document.createDocumentFragment(),
sT = document.createTextNode('Some html here'),
s = document.createElement("strong"),
pT = document.createTextNode('Lorem ipsum'),
p = document.createElement("p"),
d = document.createElement("div"),
u = document.createElement("ul"),
l1T = document.createTextNode('List'),
l1 = document.createElement("li"),
l2T = document.createTextNode('Item'),
l2 = document.createElement("li");
s.appendChild(sT);
frag.appendChild(s);
p.appendChild(pT);
frag.appendChild(p);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
el.textContent = "";
el.appendChild(frag);
| ready |
appendChild | var frag = document.createDocumentFragment(),
sT = document.createTextNode('Some html here'),
s = document.createElement("strong"),
pT = document.createTextNode('Lorem ipsum'),
p = document.createElement("p"),
d = document.createElement("div"),
u = document.createElement("ul"),
l1T = document.createTextNode('List'),
l1 = document.createElement("li"),
l2T = document.createTextNode('Item'),
l2 = document.createElement("li");
s.appendChild(sT);
frag.appendChild(s);
p.appendChild(pT);
frag.appendChild(p);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
while (el.firstChild) {
el.removeChild(el.firstChild);
}
el.appendChild(frag);
| ready |
appendChild/textContent, no createTextNode | var frag = document.createDocumentFragment(),
s = document.createElement("strong"),
p = document.createElement("p"),
d = document.createElement("div"),
u = document.createElement("ul"),
l1 = document.createElement("li"),
l2 = document.createElement("li");
s.textContent = 'Some html here';
frag.appendChild(s);
p.textContent = 'Lorem ipsum';
frag.appendChild(p);
l1.textContent = 'List';
u.appendChild(l1);
l2.textContent = 'Item';
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
el.textContent = "";
el.appendChild(frag);
| ready |
appendChild/textContent, no createTextNode, no reset | var frag = document.createDocumentFragment(),
s = document.createElement("strong"),
p = document.createElement("p"),
d = document.createElement("div"),
u = document.createElement("ul"),
l1 = document.createElement("li"),
l2 = document.createElement("li");
s.textContent = 'Some html here';
frag.appendChild(s);
p.textContent = 'Lorem ipsum';
frag.appendChild(p);
l1.textContent = 'List';
u.appendChild(l1);
l2.textContent = 'Item';
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
el.appendChild(frag);
| ready |