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

【问题标题】：What is the best way to generate a list of HTML elements dynamically using JavaScript?使用 JavaScript 动态生成 HTML 元素列表的最佳方法是什么？
【发布时间】：2019-12-17 02:06:05
【问题描述】：

许多重要的网站，如 Amazon、Facebook、Twitter... 本质上由一个列表 HTML 元素组成，这些元素是 divs 或其他从搜索查询或菜单选择动态生成的元素。例如：

亚马逊：产品列表
Facebook：帖子列表
推特：推特列表

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

【问题讨论】：

标签： javascript html html-lists

【解决方案1】：

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

来自 W3Schools。

var fruits = ["apple", "orange", "cherry"]; fruits.forEach(myFunction);

//HTML

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

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

【讨论】：

谢谢 Javier，你将如何在 React 中做到这一点？您必须为元素列表或每个元素定义一个组件？
是的，您可以将从服务器获取的数据映射到 react 中的新组件。这里是官方文档es.reactjs.org/docs/lists-and-keys.html
和material-ui.com/es/components/lists 我最喜欢的样式列表库。

【解决方案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 框架来简化这件事。

希望有帮助！

【讨论】：