建立動態建立元素的區別
阿新 • • 發佈：2022-04-18
document.write();
element.innerHTML;
document.createElement();
區別
document.write是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪
innerHTML是將內容寫入某個DOM節點，不會導致頁面全部重繪
innerHTML建立多個元素效率更高(不要拼接字串,採取陣列形式拼接)，結構稍微複雜
creatElement( )建立多個元素效率稍低一點點，但是結構更清晰
總結：不同瀏覽器下，innerHTML 效率要比 creatElement高
window.onload = function () { document.write("<div>123</div>"); }; 三種建立方式區別 1.document.write( )建立元素 如果頁面文件流載入完畢，再呼叫這句話會導致頁面重繪 var btn = document.querySelector("button"); btn.onclick = function () { document.write("<div>456</div>"); };
window.onload = function () { document.write("<div>123</div>"); }; 三種建立方式區別 1.document.write( )建立元素 如果頁面文件流載入完畢，再呼叫這句話會導致頁面重繪 var btn = document.querySelector("button"); btn.onclick = function () { document.write("<div>456</div>"); };
<body> <button>按鈕</button> <div class="inner"></div> <div class="create"></div> </body> <script> var inner = document.querySelector(".inner"); // for (let i = 0; i < 100; i++) { // inner.innerHTML += "<a href='#'>百度</a>";// } var arr = []; for (var i = 0; i <= 100; i++) { arr.push("<a href='#'>百度</a>"); } inner.innHTML = arr.join(""); // 3.document.createElement( ) 建立元素 var create = document.querySelector(".create"); for (var i = 0; i <= 100; i++) { var a = document.createElement("a"); create.appendChild(a); } </script>