HTML中是否可只编写一次结构重复调用，仅修改对应内容？

你提到的可复用结构是前端开发的常规需求，完全可以实现，但不能通过id属性实现——id的核心作用是为单个DOM元素做唯一标识，本身没有模板复用的能力。

下面给你提供不同场景的实现方案：

原生HTML+JS实现（无需引入框架） #

方案1：使用原生<template>标签 #

这是HTML官方提供的专门用于存放可复用模板的标签，标签内的内容默认不会渲染，调用时复制结构再替换内容即可，是最规范的原生实现方式：

<!-- 先定义可复用的搜索项模板 -->
<template id="search-item-template">
  <div class="search-item">
    <h3 class="search-title"></h3>
    <p class="search-desc"></p>
    <span class="search-time"></span>
  </div>
</template>
<!-- 搜索记录模块的容器，所有生成的项都会插入到这里 -->
<div id="search-history-wrap"></div>

JS渲染逻辑：

// 你的搜索历史数据，后续只需要修改这个数组就能更新渲染内容
const searchHistory = [
  {title: "HTML模块复用方法", desc: "怎么只写一次结构多次调用", time: "15分钟前"},
  {title: "CSS flex布局教程", desc: "flex实现响应式布局的技巧", time: "2小时前"},
  {title: "JS数组遍历方法", desc: "map和forEach的适用场景区别", time: "1天前"}
]

const template = document.getElementById('search-item-template')
const container = document.getElementById('search-history-wrap')

// 循环数据生成对应结构
searchHistory.forEach(item => {
  // 复制模板的完整结构
  const currentItem = template.content.cloneNode(true)
  // 替换对应位置的内容
  currentItem.querySelector('.search-title').textContent = item.title
  currentItem.querySelector('.search-desc').textContent = item.desc
  currentItem.querySelector('.search-time').textContent = item.time
  // 插入到页面容器中
  container.appendChild(currentItem)
})

方案2：字符串拼接（适合超小型项目） #

如果模块结构特别简单，也可以直接把模板写成字符串，循环拼接后插入页面：

const searchHistory = [/* 同上数据结构 */]
let htmlStr = ''
searchHistory.forEach(item => {
  htmlStr += `
  <div class="search-item">
    <h3 class="search-title">${item.title}</h3>
    <p class="search-desc">${item.desc}</p>
    <span class="search-time">${item.time}</span>
  </div>
  `
})
document.getElementById('search-history-wrap').innerHTML = htmlStr

中大型项目方案 #

如果项目后续复杂度会提升，可以使用Vue、React等前端框架，框架本身支持把重复模块封装为独立组件，只需要传入不同的参数就能渲染不同内容，维护成本更低。

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