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

Question

[许多重要的网站，如亚马逊，Facebook，Twitter ...本质上是由divs组成的列表HTML元素，或由搜索查询或菜单选择动态生成的其他元素。例如：

• Amazon：产品列表
• Facebook：帖子列表
• Twitter：Twitter列表

仅使用JavaScript根据提及的标准生成此类列表的最佳方法是什么？

Answer 1

例如，Facebook使用React在客户端生成动态内容。这是一个很好的库（框架），但是我要回答你的问题。我猜这是“手工”处理javascript上动态内容的正确方法，只是javascript。

来自W3Schools。

各种水果= [“苹果”，“橙色”，“樱桃”];Fruits.forEach（myFunction）;

// HTML

function myFunction（item，index）{document.getElementById（“ demo”）。innerHTML + = index +“：” + item +“”;}

这是用于动态内容的方法。这是对您的问题的正确答案How to create list in HTML dynamically?

Answer 2

要使用普通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框架来简化整个过程。
希望有帮助！