如何用纯JavaScript配合JSON渲染HTML 无需重复编写<p>标签

你只需要按下面的步骤写原生JS代码即可，不需要引入任何第三方库，全程不用手动写多个<p>标签： #

完整可运行代码示例 #

你可以直接把这段代码复制到你的HTML文件里，放在</body>标签前面即可：

<body>
<div class="content">
<center>
<p><B>People and their Foods</B></p>
</center>
</div>

<script>
// 1. 定义你的JSON数据，实际使用时如果是后端接口返回的直接赋值即可
const userData = [
  {"id":1,"first_name":"David","food":"Pizza","age":"24"},
  {"id":2,"first_name":"Jack","food":"Hamburger","age":"22"},
  {"id":3,"first_name":"Harrison","food":"Sweets","age":"8"}
]

// 2. 获取页面上的content容器，后续生成的内容都会插入到这个容器中
const contentContainer = document.querySelector('.content')

// 3. 遍历每一条用户数据，自动生成p标签
userData.forEach(item => {
  // 创建空的p标签元素
  const pTag = document.createElement('p')
  // 给p标签设置显示内容，你可以根据自己的需求调整显示格式
  pTag.textContent = `${item.first_name}，年龄${item.age}，喜欢的食物是${item.food}`
  // 把生成好的p标签插入到content容器末尾
  contentContainer.appendChild(pTag)
})
</script>
</body>

代码说明 #

• 所有<p>标签都是JS循环遍历JSON数据时自动生成的，有多少条数据就会自动生成对应数量的p标签，不需要手动逐个编写
• 如果需要调整显示样式，可以给生成的p标签自定义类名，在循环逻辑中加一行pTag.classList.add('自定义类名')即可
• 如果JSON数据是从后端接口获取的，只需要把接口返回的数组赋值给userData变量，后续渲染逻辑完全不用修改

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