使用 JavaScript 動態生成 HTML 元素列表的最佳方法是什么？

Question

許多重要的網站，如亞馬遜、Facebook、Twitter...基本上由一個列表 HTML 元素組成，這些元素是div或從搜索查詢或菜單選擇動態生成的其他元素。 例如：

• 亞馬遜：產品清單
• Facebook ：帖子列表
• 推特：推特列表

根據僅使用 JavaScript 提到的標准生成此類列表的最佳方法是什么？

Answer 1

例如，Facebook 使用 React 在客戶端生成動態內容。 對於這類事情，這是一個很好的庫（框架）......但我會回答你的問題。 我想這是“手動”處理javascript動態內容的正確方法，只是javascript。

來自 W3Schools。

varfruits = ["apple", "orange", "cherry"]; 水果.forEach(myFunction);

//HTML

function myFunction(item, index) { document.getElementById("demo").innerHTML += index + ":" + item + "
"; }

這就是用於動態內容的方法。 這是您的問題如何動態創建 HTML 列表的正確答案？

Answer 2

要使用 vanilla JavaScript 執行此操作，您需要從要顯示的內容數組開始，然后遍歷列表並為每個項目調用 document.createElement。 有很多方法可以實現這一點。 一個例子看起來像這樣：

const testStuff = [ 'product 1', 'product 2', 'product 3' ]

for (let i = 0; i < testStuff.length; i++) {
  let element = document.createElement('div');
  element.innerHTML = testStuff[i];
  document.getElementsByTagName('body')[0].appendChild(element);
}

這將導致 HTML 文檔正文中有 3 個 div，其中包含數組中的每個值。 值得指出的是，您上面列出的所有公司肯定都在使用 ES6 語法和 JavaScript 框架來簡化這一切。

希望有幫助！