Как при помощи js или jquery создать сложную DOM структуру?

Question

[Qurel]

<div class="gallery-item">
            <div class="gallery-item__img"><img src="img/gallery/gallery1.jpg" alt="Best Photo 1"/>
              <div class="gallery-item__hover">
                <div class="gallery-item__icons"><span class="gallery-item__icon">
                    <svg class="search">
                      <use xlink:href="#search"></use>
                    </svg></span><span class="gallery-item__icon">
                    <svg class="resize">
                      <use xlink:href="#resize"></use>
                    </svg></span></div>
              </div>
            </div>
          </div>

Такой вариант не очень красивый:

let galleryWordpressDesign = $(`<div class="work-gallery__item wordpress"><div class="work-gallery__img"><img src = "img/wordpress/wordpress${count + 1}.jpg" alt="Image${count + 1}"></div><div class="work-gallery__info"><div class="work-gallery__icons"><a href="#" class="work-gallery__icon"><svg class="link"><use xlink:href="#link"></svg></a><a href="#" class="work-gallery__icon"><svg class="search"><use xlink:href="#search"></svg></a></div><h5 class="work-gallery__heading">creative design</h5><span class="work-gallery__cath">Wordpress</span></div></div>`);

Answer 1

[Stalker_RED]

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Answer 2

[Alex]

Ключевые функции

document.createElement
appendChild
classList.add

Answer 3

[Ihor Bratukh]

Шаблонные строки ``

Answer 4

[Александр Косицын]

React))) + jsx