javascript сгенерировать группу элементов

Question

API дает мне массив данных, содержащий такие элементы:

<div class="item-timeline timeline-new">
  <div class="t-dot">
    <div class="t-dark">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-server">
        <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
        <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
        <line x1="6" y1="6" x2="6" y2="6"></line>
        <line x1="6" y1="18" x2="6" y2="18"></line>
      </svg>
    </div>
  </div>
  <div class="t-content">
    <div class="t-uppercontent">
      <h5>TITLE</h5>
      <span class="">DATE</span>
    </div>
    <p>DETAIL</p>
    <div class="tags">
      <div class="badge badge-warning">TAG1</div>
      <div class="badge badge-primary">TAG2</div>
    </div>
  </div>
</div>

api дает мне TITLE, DATE, TAG1, TAG2 для каждой группы как json массив и объект

Я хочу использовать этот код для обработки ответа JSON:

let xml = new XMLHttpRequest();
xml.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let response = JSON.parse(this.responseText);
    response.forEach(element => {
      // Do something for every element in response here
    });
  }
};
xml.open("GET", "https://api.site.com/example", true);
xml.send();

Как мне заменить комментарий "Do something for every element in response here", чтобы использовать каждый элемент из API?

Я думаю, что это примерно так:

var
  body = document.getElementsByTagName('body')[0],
  newdiv = document.createElement('div'); //create a div
newdiv.id = 'newid';                      //add an id
body.appendChild(newdiv);                 //append to the doc.body

Answer 1

Если каждый элемент в вашем массиве представляет собой строку HTML, определяющую новый элемент, то было бы просто использовать метод insertAdjacentHTML, например:

const
  body = document.getElementsByTagName('body')[0],
  response = simulateResponse();

response.forEach(element =>
  // `element` is already an HTML string
  body.insertAdjacentHTML("beforeend", element) 
);

function simulateResponse(){
  const parsedResponseArray = [
    "<div><span>Some content </span><span>and more content</span></div>",
    "<div><span>Cool content </span><span>and more content</span></div>",
    "<div><span>Great content </span><span>and more content</span></div>",
  ];
  return parsedResponseArray;
}

div{ margin: 1em; }