How to more effectively work with the dom javascript?

Good afternoon. Interested in the following question. More to effectively and correctly in terms of performance?

To create elements this way:

var newLi = document.createElement('li');
newLi.className = "alert";
newLi.innerHTML = "<strong>Yay!</strong> You read this important message.";

list.appendChild(newLi);


Or this:

var newLi = `<li class="alert"><strong>Hurray!</strong> You read this important message.</li>`
list.innerHTML = newLi;
July 2nd 19 at 17:32
4 answers
July 2nd 19 at 17:34
IMHO extreme savings. In order to effectively work with the DOM, use the DOM Vritual.
Vritual DOM is slow, very slow, so slow that slower its only working with the dom angular.js - geovanni_Hegmann commented on July 2nd 19 at 17:37
July 2nd 19 at 17:36
this is the most productive element.innerHTML + Join

var html = [];
for (var i = 1; i < = 1000; i++) {
 html.push('
  • Element '); html.push(i); html.push("); } el.innerHTML = html.join(");
  • Proof? - geovanni_Hegmann commented on July 2nd 19 at 17:39
    : I measure more and compare - gustave_Kertzmann52 commented on July 2nd 19 at 17:42
    : wildbit.com/blog/2006/11/21/javascript-optimizatio... - Dalton57 commented on July 2nd 19 at 17:45
    2006!!! 10 years have passed, dude. - Dalton57 commented on July 2nd 19 at 17:48
    : what ? Compare and do a sweep. - Richie_Hyatt commented on July 2nd 19 at 17:51
    I measured, and I know that the array in this bundle is an extra concatenation string + `createContextualFragment` will be quicker. - Dalton57 commented on July 2nd 19 at 17:54
    : oops - current is not working in safari - Richie_Hyatt commented on July 2nd 19 at 17:57
    And? Fallback to innerHTML someone canceled? Modern browsers for 10 years made such a leap is that to refer to these articles are stupid, really stupid. - Dalton57 commented on July 2nd 19 at 18:00
    : Yes, and here is the article in General, people asked for proof and I got rid of that Google has issued, for sense to measure and the odd show as it is not seen. and about jump Yes I agree the race was but not so much to everything and everywhere worked iskluchitelno still have features not supported by certain browsers and I'm not talking about IE which thank God is no more. And from this zoo work there there is never go for different companies mold and implement on your own. Someone introduced and someone did not. and so on - Richie_Hyatt commented on July 2nd 19 at 18:03
    IMHO the Author of the first post is right - this extreme savings is the difference 8ms - 14ms is not noticeable to humans for it is all within a second. - Dalton57 commented on July 2nd 19 at 18:06
    July 2nd 19 at 17:38
    The fastest will generally appendChild)

    Besides, evil is not considered. Evil is:
    innerHTML +=...
    Pass around Dom'e have
    1000+ DOM elements
    Not store elements in variables, and every time from Dom'e and
    July 2nd 19 at 17:40
    If the parent is empty, then innerHTML is the fastest
    If there is something already there, then insert using documentFragment
    var frag = document.createDocumentFragment();
    for(let i = 0; i < 10; i++) {
     let newLi = document.createElement('li');
     newLi.className = "alert";
     newLi.innerHTML = "<strong>Yay!</strong> You read this important message.";
    frag.appendChild(newLi);
    }
    list.appendChild(frag);

    Find more questions by tags HTMLWeb DevelopmentJavaScript