Ggtcf

A social experiment. What is the worst that can happen?

Did US corporations pay demonstrators in the German demonstrations against article 13?

Is there enough fresh water in the world to eradicate the drinking water crisis?

Can I create an upright 7-foot × 5-foot wall with the Minor Illusion spell?

How do ultrasonic sensors differentiate between transmitted and received signals?

I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?

Proof of Lemma: Every integer can be written as a product of primes

Could solar power be utilized and substitute coal in the 19th century?

Are taller landing gear bad for aircraft, particulary large airliners?

Would it be legal for a US State to ban exports of a natural resource?

Have I saved too much for retirement so far?

Can I use my Chinese passport to enter China after I acquired another citizenship?

Can the harmonic series explain the origin of the major scale?

Superhero words!

Why does this part of the Space Shuttle launch pad seem to be floating in air?

Invariance of results when scaling explanatory variables in logistic regression, is there a proof?

What (else) happened July 1st 1858 in London?

Perfect riffle shuffles

Why are on-board computers allowed to change controls without notifying the pilots?

Is a naturally all "male" species possible?

Why are all the doors on Ferenginar (the Ferengi home world) far shorter than the average Ferengi?

Can a controlled ghast be a leader of a pack of ghouls?

Can a Gentile theist be saved?

Calculating the number of days between 2 dates in Excel

documnt.innerHTML vs document.createElement… Can there be a significant performance difference?

Advantages of createElement over innerHTML?How can I upload files asynchronously?How can I convert a string to boolean in JavaScript?jQuery document.createElement equivalent?How can I know which radio button is selected via jQuery?What's the difference between using “let” and “var”?How can I get query string values in JavaScript?Why is the Android emulator so slow? How can we speed up the Android emulator?Improve INSERT-per-second performance of SQLite?What is the difference between call and apply?Can (a== 1 && a ==2 && a==3) ever evaluate to true?

0

Imagine, there is a larger website that accepts user interactions and needs to show a lot of new elements and delete other ones when the user clicks somewhere.

Can there be a significant performance difference these 2 approaches?

---

putting everything in a string:

var x = document.getElementByID("x");
x.innerHTML = "<div><div><span>...</span><div>...</div></div></div>"` 

---

writing the hierarchy like this:

var a = document.createElement("div");
var b = document.createElement("div");
var c = document.createElement("span");
// ...
a.appendChild(b)
b.appendChild(c)
// ...
var x = document.getElementByID("x");
document.body.insertBefore(a, x); 

javascript html performance

share|improve this question

asked Mar 8 at 8:04

AlphaAlpha

5111618

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Possible duplicate of Advantages of createElement over innerHTML?
  
  – Seblor
  Mar 8 at 8:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  updating DOM as little as possible is the right way
  
  – Kajbo
  Mar 8 at 8:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To add to the above commenters, generally they should be pretty close in speed for normal applications in modern browsers. Some old browsers (e.g. older versions of IE) were significantly faster with innerHTML. I would recommend not using innerHTML, among other things it can leave you vulnerable to XSS if you're not very careful.
  
  – Joru
  Mar 11 at 22:57
  

  
  
  
  

add a comment | 

0

Imagine, there is a larger website that accepts user interactions and needs to show a lot of new elements and delete other ones when the user clicks somewhere.

Can there be a significant performance difference these 2 approaches?

---

putting everything in a string:

var x = document.getElementByID("x");
x.innerHTML = "<div><div><span>...</span><div>...</div></div></div>"` 

---

writing the hierarchy like this:

var a = document.createElement("div");
var b = document.createElement("div");
var c = document.createElement("span");
// ...
a.appendChild(b)
b.appendChild(c)
// ...
var x = document.getElementByID("x");
document.body.insertBefore(a, x); 

javascript html performance

share|improve this question

asked Mar 8 at 8:04

AlphaAlpha

5111618

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Possible duplicate of Advantages of createElement over innerHTML?
  
  – Seblor
  Mar 8 at 8:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  updating DOM as little as possible is the right way
  
  – Kajbo
  Mar 8 at 8:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To add to the above commenters, generally they should be pretty close in speed for normal applications in modern browsers. Some old browsers (e.g. older versions of IE) were significantly faster with innerHTML. I would recommend not using innerHTML, among other things it can leave you vulnerable to XSS if you're not very careful.
  
  – Joru
  Mar 11 at 22:57
  

  
  
  
  

add a comment | 

Imagine, there is a larger website that accepts user interactions and needs to show a lot of new elements and delete other ones when the user clicks somewhere.

Can there be a significant performance difference these 2 approaches?

---

putting everything in a string:

var x = document.getElementByID("x");
x.innerHTML = "<div><div><span>...</span><div>...</div></div></div>"` 

---

writing the hierarchy like this:

var a = document.createElement("div");
var b = document.createElement("div");
var c = document.createElement("span");
// ...
a.appendChild(b)
b.appendChild(c)
// ...
var x = document.getElementByID("x");
document.body.insertBefore(a, x); 

javascript html performance

share|improve this question

asked Mar 8 at 8:04

AlphaAlpha

5111618

var x = document.getElementByID("x");
x.innerHTML = "<div><div><span>...</span><div>...</div></div></div>"` 

var a = document.createElement("div");
var b = document.createElement("div");
var c = document.createElement("span");
// ...
a.appendChild(b)
b.appendChild(c)
// ...
var x = document.getElementByID("x");
document.body.insertBefore(a, x); 

share|improve this question

asked Mar 8 at 8:04

AlphaAlpha

5111618

share|improve this question

asked Mar 8 at 8:04

AlphaAlpha

5111618

asked Mar 8 at 8:04

AlphaAlpha

5111618

asked Mar 8 at 8:04

AlphaAlpha

5111618