JS DOM learn three ways to create elements

document.write() understand

Write content directly to the document stream of the page , But the document flow is finished , Will cause the page to redraw , Recreate a new page , Only the newly written element , Only div After execution

 var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }

innerHTML

It's more efficient to create multiple elements （ Don't take concatenated strings , Take the form of array ）

  var d1 = +new Date();
            var inner = document.querySelector('.inner');
            // for (var i = 0; i <= 100; i++) {
            //     inner.innerHTML += '<a href="#"> Baidu </a>';
            // } Time 21  This is the way to splice strings 
            var arr = [];
            for (var i = 0; i <= 100; i++) {
                arr.push('<a href="#"> Baidu </a>');
            } // improvement   Array  2
            inner.innerHTML = arr.join('');
            // var create = document.querySelector('.create');
            // for (var i = 0; i <= 100; i++) {
            //     var a = document.createElement('a');
            //     a.innerHTML = ' Better than ';
            //     create.appendChild(a);
            // } // Time  2  Efficient 

document.createElement()

After creating the node , Then indicate where to add it