如何使用JS在HTML中创建每个项都带href链接的动态列表

方案1：基础实现（每项跳转对应名称的页面） #

<h1>Toppings</h1>
<ul id="toppingList"></ul>
<script>
var toppings = ['tomatoes', 'olives', 'cheese', 'peperonies']
// 获取列表容器
const listContainer = document.getElementById('toppingList')

toppings.forEach(item => {
  // 创建列表项元素
  const li = document.createElement('li')
  // 创建链接元素
  const link = document.createElement('a')
  // 自定义链接规则，示例为跳转至和配料名同名的同级html页面
  link.href = `./${item}.html`
  // 设置链接显示文本
  link.textContent = item
  // 可选配置：点击后在新标签页打开
  // link.target = '_blank'
  
  // 组装元素插入列表
  li.appendChild(link)
  listContainer.appendChild(li)
})
</script>

方案2：为不同列表项自定义独立链接 #

如果各列表项的跳转规则不统一，可以把原数组调整为对象数组，分别存储显示名称和对应的跳转地址：

<h1>Toppings</h1>
<ul id="toppingList"></ul>
<script>
var toppings = [
  {name: 'tomatoes', url: './tomato-intro.html'},
  {name: 'olives', url: './olives-price.html'},
  {name: 'cheese', url: './cheese-type.html'},
  {name: 'peperonies', url: './peperonies-make.html'}
]
const listContainer = document.getElementById('toppingList')

toppings.forEach(item => {
  const li = document.createElement('li')
  const link = document.createElement('a')
  link.href = item.url
  link.textContent = item.name
  li.appendChild(link)
  listContainer.appendChild(li)
})
</script>

内容的提问来源于stack exchange，提问作者reckon3