如何用纯JavaScript加载本地HTML模板并操作其DOM填充API数据？

我明白你现在的困扰——用XMLHttpRequest加载了HTML模板后，只能把它当成字符串插入页面，没法直接操作里面的DOM元素来填充数据对吧？别担心，咱们用纯JavaScript就能完美解决这个问题，我给你一步步拆解实现思路和代码：

第一步：先修正模板的小问题 #

注意哦，你提供的template.html里有重复的id="first-attribute"，HTML里id是唯一标识，重复会导致后续DOM操作出错。咱们把这些重复的id改成class，比如：

<!-- 修改后的template.html -->
<div class="data-item">
  <h1 class="data-name">value</h1>
  <p class="data-attribute">value</p>
  <p class="data-attribute">value</p>
  <p class="data-attribute">value</p>
</div>

这样后续我们可以通过class来批量操作这些元素。

第二步：加载模板并转换为可操作的DOM对象 #

之前你用XHR拿到的是模板的字符串内容，咱们需要把它转换成真正的DOM节点，这样就能像操作页面上的元素一样修改它。这里用DOMParser来实现：

// 加载HTML模板的函数
async function loadTemplate() {
  try {
    const response = await fetch('template.html');
    const templateHtml = await response.text();
    // 把字符串转换成DOM文档
    const parser = new DOMParser();
    const doc = parser.parseFromString(templateHtml, 'text/html');
    // 返回模板的根元素（也就是我们的.data-item）
    return doc.querySelector('.data-item');
  } catch (error) {
    console.error('加载模板失败:', error);
    return null;
  }
}

这里用了fetch（比XHR更简洁现代），如果需要兼容旧浏览器，也可以换成XHR写法，但fetch现在大部分浏览器都支持了。

第三步：加载数据并渲染模板 #

接下来咱们加载datas.json的数据，然后循环每一条数据，克隆模板、填充内容，最后添加到页面的#loaded-content里：

// 加载数据并渲染的主函数
async function renderContent() {
  // 先加载模板和数据
  const template = await loadTemplate();
  if (!template) return;

  const dataResponse = await fetch('datas.json');
  const data = await dataResponse.json();

  const container = document.getElementById('loaded-content');
  container.innerHTML = ''; // 清空容器原有内容

  // 循环每一条数据
  data.datas.forEach(item => {
    // 克隆模板（一定要克隆，不然会直接移动原模板节点）
    const templateClone = template.cloneNode(true);

    // 填充数据到克隆后的模板里
    templateClone.querySelector('.data-name').textContent = item.name;
    // 处理三个data-attribute元素，对应三个属性
    const attributes = templateClone.querySelectorAll('.data-attribute');
    attributes[0].textContent = item['first-attribute'];
    attributes[1].textContent = item['second-attribute'];
    attributes[2].textContent = item['third-attribute'];

    // 把填充好的模板添加到容器里
    container.appendChild(templateClone);
  });
}

// 页面加载完成后执行渲染
window.addEventListener('DOMContentLoaded', renderContent);

关键知识点解释 #

• cloneNode(true)：一定要传true，这样会深度克隆模板里的所有子元素，不然只会克隆空的父节点。
• DOMParser：把HTML字符串转换成DOM文档，让我们能直接操作模板里的元素，而不是只能插入字符串。
• async/await：让异步代码看起来像同步代码，比回调函数更易读。

如果你的项目必须用XHR而不是fetch，我也可以给你对应的XHR版本的代码，不过fetch确实更简洁好用。

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