請原諒上面令人困惑的問題......
我有一個儀表板，每隔幾秒鐘將使用 ajax 獲取 json 資料。當前的解決方案是清除儀表板，并獲取 json 資料并將它們與 html 結合起來，所以有點像這樣：
$.ajax({
....
}).done((res) => {
$mainBody.html('');
for (let i = 0; i < res.length; i ){
let ele = '<div > with adding the json data </div>';
$mainBody.append(ele);
}
})
每個ele將包含大約 55 行 html 代碼，并且大部分時間將回圈超過 20 次以完成添加所有元素。
現在我想對這個儀表板采取更加面向物件的方法，并考慮使用document.createElement()所有元素，然后innerHtml在每次獲取后直接設定它們。但我不太確定效率和速度，我應該使用哪種解決方案。
uj5u.com熱心網友回復：
最有效的方法是使用 document.createElement，因為除了創建元素之外，您還可以控制其所有屬性，也就是說，您不需要使用 querySelector，只需將創建的元素存盤在變數中，然后將其添加到在 DOM 中，innerHTML 會重建整個 DOM，而 appendChild 只是父元素所在的 DOM 部分，此外您無法控制元素或其子元素。
const myElement = document.createElement("span");
myElement.textContent = "Hello world!";
myElement.className = "message";
document.body.appendChild(myElement);body {
text-align: center;
}
.message {
font-weight: bold;
font-size: 32px;
color: #222;
}"innerHTML = ..." 與 "appendChild(txtNode)"
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
uj5u.com熱心網友回復：
最好是在回圈中創建一個大字串，并innerHTML在最后分配一次。
let html = res.map(el => `<div > add json data in here </div>`).join('');
$mainBody.innerHTML = html;
瀏覽器在決議 HTML 方面非常高效，但您應該只執行一次。您的方法需要將 DOM 轉換回 HTML 并在每次回圈中重新決議它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/418257.html
標籤：
下一篇：js背景換色器