如何更新已渲染HTML模板中的值而非重复追加内容？

要解决每次调用createGui就重复添加模板元素的问题，核心思路是区分首次渲染与后续更新：首次渲染时创建元素并标记唯一标识，后续调用时仅通过标识找到已存在的元素，更新其属性值即可。

步骤1：优化HTML模板结构 #

给模板内的元素套一个父容器，方便添加唯一标识（比如设备组ID），后续通过这个标识快速定位元素：

<div class="row block-column align-items-center justify-content-center"></div>
<template id="DEVICE_TEMPLATE">
  <!-- 添加父容器，用于标记唯一ID -->
  <div class="device-group-container" data-device-id="">
    <div class="col-2 col-xl-2" align="center">
      <a class="tDeviceHref ">
        <img class="tDeviceImg" src="" height="50px" width="50px" title="">
      </a>
    </div>
    <div class="col-10 col-xl-4">
      <div class="devicePicture" align="center">
        <a class="tDeviceLabel text-left">Name</a>
      </div>
      <div class="progress" style="height: 25px;">
        <div class="bg-secondary progress-bar progress-bar-animated progress-bar-striped">
          <div class="tDeviceVerbrauch"></div>
        </div>
      </div>
    </div>
  </div>
</template>

步骤2：修改JavaScript逻辑 #

修改createGui函数，先检查对应设备组的元素是否存在：存在则更新属性，不存在才克隆模板创建元素。同时可选处理设备组删除的情况，移除已不存在的元素：

function createGui(devices){
  const templ = document.querySelector("#DEVICE_TEMPLATE");
  const container = document.querySelector(".block-column");
  // 假设allDeviceGroups中的每个项有唯一id属性作为标识
  const currentDeviceIds = allDeviceGroups.map(group => group.id);

  for (const group of allDeviceGroups) {
    const groupDevice = group;
    const deviceId = group.id;

    // 查找当前设备组对应的已渲染元素
    let deviceContainer = container.querySelector(`[data-device-id="${deviceId}"]`);

    if (!deviceContainer) {
      // 首次渲染：克隆模板并设置唯一标识
      const clone = templ.content.cloneNode(true);
      deviceContainer = clone.querySelector(".device-group-container");
      deviceContainer.dataset.deviceId = deviceId;
      container.appendChild(clone);
    }

    // 更新元素属性
    deviceContainer.querySelector(".tDeviceImg").src = groupDevice.DEVICE.img.imgRunning;
    // 示例：更新设备名称
    deviceContainer.querySelector(".tDeviceLabel").textContent = groupDevice.DEVICE.name;
    // 示例：更新能耗显示
    deviceContainer.querySelector(".tDeviceVerbrauch").textContent = `${groupDevice.DEVICE.verbrauch} kW`;
    // 示例：更新进度条宽度
    deviceContainer.querySelector(".progress-bar").style.width = `${groupDevice.DEVICE.progress}%`;
  }

  // 可选：移除已从设备组列表中删除的元素
  const existingDeviceContainers = container.querySelectorAll("[data-device-id]");
  existingDeviceContainers.forEach(container => {
    const id = container.dataset.deviceId;
    if (!currentDeviceIds.includes(id)) {
      container.remove();
    }
  });
}

核心原理说明 #

• 通过data-device-id这个自定义属性，给每个设备组的渲染元素绑定唯一标识，确保每次调用createGui时能精准找到对应元素。
• 避免了每次调用都克隆模板追加的操作，仅在元素不存在时才创建，后续仅更新属性值，彻底解决重复追加的问题。
• 可选的删除逻辑能保证页面元素与设备组列表同步，避免残留无效元素。

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