Как добавить DOM элемент на HTML страницу с typescript в Ionic 4

Мой html компонент выглядит так

<ion-header>
  <ion-toolbar>
    <ion-title>Мои записи</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

  <ion-button expand="full" (click)="updateEntryList()" color="warning"> Обновить список записей</ion-button>


  <div class="entry">
      <div class="docFullname"></div>
      <div class="rating"></div>
      <div class="workPlace"></div>
      <div class="price"></div>
      <div class="time"></div>
  </div>


</ion-content>

А функция клика на кнопку в классе компонента так

  async updateEntryList() {
    const toast = await this.toastController.create({
      message: "Список записей был обновлен",
      duration: 3000
    });
    toast.present();

    fetch("../../../assets/entryData/entryData.json")
    .then( response => {
      if (!response.ok) console.log("Promise has been failed");
      return response.json();
    })
    .then(data => {
      for (var key in data)
        console.log(key)
    });




    fetch("../../../assets/entryData/entryData.json")
    .then(response => {
      if (!response.ok) console.log("Yup, it's wrong");
      return response.json();
    })
    .then(data => {
      const fullnameElems = document.getElementsByClassName("docFullname");
      const ratingElems = document.getElementsByClassName("rating");
      const workPlaceElems = document.getElementsByClassName("workPlace");
      const priceElems = document.getElementsByClassName("price");
      const timeElems = document.getElementsByClassName("time");

      for (var i = 0; i < fullnameElems.length; i++) {
        (fullnameElems[i] as HTMLDivElement).textContent = data.fullname;
        (ratingElems[i] as HTMLDivElement).textContent = data.rating;
        (workPlaceElems[i] as HTMLDivElement).textContent = data.workPlace;
        (priceElems[i] as HTMLDivElement).textContent = data.price;
        (timeElems[i] as HTMLDivElement).textContent = data.time;
      }
    });


  }

Как видите в классе компонента я просто добавляю в теги текстовые данные которые получаю из .json файла. Но при таком способе я просто переопределяю текстовое содержимое этих тегов, а мне нужно создать при клике точно такие же элементы с такими же текстовым содержимым. Проще говоря мне нужно при клике как бы дублировать это

  <div class="entry">
      <div class="docFullname"></div>
      <div class="rating"></div>
      <div class="workPlace"></div>
      <div class="price"></div>
      <div class="time"></div>
  </div>