innerHTML vs createElement/appendChild

Ne mund të shtojmë elementë në një element DOM duke krijuar një element dhe duke e shtuar atë. (Le të pretendojmë se kemi një element div ekzistues për të punuar)

let newElement = document.createElement('p'); 
newElement.textContent = 'New Element'; 
div.appendChild(newElement);

Ne gjithashtu mund të manipulojmë HTML-në e një elementi drejtpërdrejt duke përdorur innerHTML.

div.innerHTML += '<p>New Element</p>'

Përdorimi i innerHTML është më i pastër, veçanërisht kur fillojmë të shtojmë veti shtesë si klasa dhe ngjarje javascript.

div.innerHTML += '<p class="paragraph" onclick="doSomething()">New Element</p>'

Ndërsa është i pastër, përdorimi i innerHTML riparon dhe rikrijon të gjitha nyjet DOM brenda elementit div dhe është më pak efikas sesa thjesht shtimi i një elementi të ri në div. Në rastet e mësipërme, CreEElement është zgjedhja më e efektshme.

Sidoqoftë, innerHTML ka një avantazh kur duam të bëjmë shumë gjëra për një element. Për shembull, le të themi se duhet të shtojmë njëqind lista në ndarjen tonë.

for (i = 0; i < 100; i++) { 
 let newElement = document.createElement('p'); 
 newElement.textContent = 'New Element Number: ' + i;  
 div.appendChild(newElement); 
}

Nëse përdorim createElement, duhet të shtojmë çdo përsëritje, duke rezultuar në një rillogaritje të stileve, pikturës dhe paraqitjes çdo herë. Kjo nuk është aspak efikase, dhe përdorimi i innerHTML brenda ciklit në të njëjtën mënyrë është edhe më keq - por çka nëse shtojmë paragrafin htmls në një variabël në vend të kësaj, dhe pastaj duhet të vendosim innerHTML-in vetëm një herë në fund?

let newElements = ''; 
for (i = 0; i < 100; i++) { 
 newElements += `<p>New Element Number: ${i}</p>` 
} 
div.innerHTML =+ newElements;

Siç mund ta shohim, në raste të thjeshta një herë, createElement/appendChild është më efikas, por në rastet kur bëhen shumë ndryshime, innerHTML mund të jetë zgjidhja më efikase.

Ne mund të testojmë performancat e tyre në këtë përgjigje që kam krijuar: https://repl.it/@NeedsAUsername/CharmingFaroffDeveloper

Thirrni testin në fund. Parametri i parë merr numrin e përsëritjeve që duam në çdo lak, dhe parametri i dytë është madhësia e kampionit (numri i sytheve të kryera në total, i cili do të jetë mesatar). Ekzekutoni repl duke përdorur numra të ndryshëm dhe mund të shihni vetë ndryshimet e performancës.

Provoni të telefononi testin (1, 100). Siç pritej, appendChild punon në mënyrë më efikase kur ka vetëm një përsëritje në ciklin tonë. Megjithatë, innerHTML shpejt arrin në performancën. Provoni të telefononi testin (5, 100) dhe innerHTML bëhet fituesi i qartë pas vetëm 5 përsëritjeve.