Refresh / reload a generated html template

Question

i Have created a site, wahts uses the HTML TEMPLATES. I can create the site and everything is showing correctly. But how can I update the values inside the template after creating?

HTML Part

...
<div class="row block-column align-items-center justify-content-center"></div>
<template id="DEVICE_TEMPLATE">
    <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 id="opwnwblp1" style="width: 100%;" class="bg-secondary progress-bar progress-bar-animated progress-bar-striped">
          <div class="tDeviceVerbrauch "></div>
        </div>
      </div>
    </div>
</template>
...

This ist the JS part:

function createGui(devices){
  const templ = document.querySelector("#DEVICE_TEMPLATE")
  for (var i = 0; i < allDeviceGroups.length; i++) {
    // ...
    const clone = templ.content.cloneNode(true);
    clone.querySelector(".tDeviceImg").src = groupDevice["DEVICE"]["img"]["imgRunning"];
    document.querySelector(".block-column").append(clone);
    // ...
  }
}

The above code is only a part of the hole one with more settings to the template, but not relevant for my question.

If i reload the function createGui, the the gui will append again and again aso. I like to refresh only the values of the parts, like chnage the img for

   clone.querySelector(".tDeviceImg").src = groupDevice["DEVICE"]["img"]["imgRunning"];

Answer 1

As there was no means by which to run the code posted ( lacking key variables ) but perhaps you can see from this how to use the Template and update it's content?

const devices = {
  vintage: {
    src: 'https://www.funkidslive.com/wp-content/uploads/2021/12/ENIAC-changing_a_tube-1024x846.jpg',
    text: 'Vintage #1',
    online: false
  },
  gamer: {
    src: 'https://www.pcspecialist.co.uk/images/landing/seo/desktop-pc-lineup.jpg',
    text: 'Gamer #1',
    online: true
  },
  mainframe: {
    src: 'https://www.allaboutcircuits.com/uploads/articles/IBM_z16_.jpg',
    text: 'Mainframe #1',
    online: false
  },
  datacenter: {
    src: 'https://www.channelfutures.com/files/2016/11/server-room-mainframe-piece-scanrailthinkstock_0-707x432.jpg',
    text: 'datacenter #1',
    online: false
  }
};

const newdevices = {
  vintage: {
    src: 'https://media.cybernews.com/images/featured/2021/02/qw2ja4h83fz41.jpg',
    text: 'Vintage #2',
    online: true
  },
  gamer: {
    src: 'https://www.reviewgeek.com/p/uploads/2020/12/19a62eff.jpg',
    text: 'Gamer #2',
    online: false
  },
  mainframe: {
    src: 'https://blog.microfocus.com/wp-content/uploads/2014/02/Mainframe5011.png',
    text: 'Mainframe #2',
    online: true
  },
  datacenter: {
    src: 'https://www.dotmagazine.online/_Resources/Persistent/5/1/1/d/511dfa5ac97aed4f85bbb537bbef549e47121828/iStock-684619976%20DAta%20Center%20Models-1006x628.jpg',
    text: 'Datacenter #2',
    online: true
  }
}

let ref = {};

function createGui(device) {
  const templ = document.querySelector("#DEVICE_TEMPLATE").content.cloneNode(true);
  const src = devices.hasOwnProperty(device) ? devices[device].src : false;
  if (!src) return;

  // add a new wrapper div for the template and assign some sort of identifier
  // in this case a dataset atteibute.
  let div = document.createElement('div');
      div.dataset.device = device;

  // do whatever to the contents within the template you need
  let img = templ.querySelector('img.tDeviceImg');
      img.src = src;
      img.title = devices[device].text;
      img.alt = device;
      img.dataset.device = device;
  templ.querySelector('a.tDeviceLabel').innerHTML = devices[device].text;
  templ.querySelector('i.online').textContent = devices[device].online ? 'Online' : 'Offline'

  div.append(templ);

  // store a reference to the added template
  ref[device] = div;

  // add the template to the DOM within it's new container
  document.querySelector(".block-column").appendChild(div);
}








//load all the images calling a new template for each
Object.keys(devices).forEach(device => {
  createGui(device)
});





// Change all the images at some point...
// this is just to illustrate the identification and manipulation of the template contents
// after the initial pageload. There are other ways to do this of course.

setTimeout(() => {
  Object.keys(ref).some((device, index) => {
    // find the original HTMl based on the ref
    let oTmpl = ref[device];

    setTimeout(() => {
      // modify contents of template
      let img = oTmpl.querySelector('img.tDeviceImg');
          img.src = newdevices[device].src;
          img.title = newdevices[device].text;
          
      oTmpl.querySelector('a.tDeviceLabel').innerHTML = newdevices[device].text;
      oTmpl.querySelector('i.online').textContent = newdevices[device].online ? 'Online' : 'Offline'
    }, 1000 * index);
  });

}, 5000);

<div class="row block-column align-items-center justify-content-center"></div>

<template id="DEVICE_TEMPLATE">
  <div class="col-2 col-xl-2"  align="center">
    <a class="tDeviceHref">
    <img class="tDeviceImg" height="50px" width="50px" />
    </a>
  </div>

  <i class='online'></i><!-- online status of IOT device -->

  <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 id="opwnwblp1" style="width: 100%;" class="bg-secondary progress-bar progress-bar-animated progress-bar-striped">
      <div class="tDeviceVerbrauch"></div>
    </div>
    </div>
  </div>
</template>

update If you maintain a reference ( in a global variable for instance ) to the template when it is used you can call upon that variable when you need to update the content that has been added to the DOM already.