Блог

Мне нужно получить элемент и добавить его несколько раз внутри его родительского элемента.

HTML

 <main>
      <div class="wrapper">
        <img src="https://placeimg.com/300/300/arch?t=1493746896324/" />
        <div class="cover"></div>
      </div>
</main>
  

JS

 const main = document.querySelector("main");
const wrapper = document.querySelector(".wrapper");

for (let index = 0; index < 10; index  ) {
  main.innerHTML  = wrapper;
}

  

Результат

[object HTMLDivElement] вместо этого вставляется.

Клонирование узла

• parentNode.append()
• Node.cloneNode()

 const main = document.querySelector("main");
const wrapper = document.querySelector(".wrapper");

for (let index = 0; index < 10; index  ) {
  main.append(wrapper.cloneNode(true));
}  

 <main>
  <div class="wrapper">
    <img src="https://placeimg.com/300/300/arch?t=1493746896324/" />
    <div class="cover"></div>
  </div>
</main>  

Объединить с помощью outerHTML

В противном случае, учитывая innerHTML и манипулируя строками, вы могли бы сделать:

• Element.innerHTML
• Element.outerHTML

 const main = document.querySelector("main");
const wrapper = document.querySelector(".wrapper");

for (let index = 0; index < 10; index  ) {
  main.innerHTML  = wrapper.outerHTML;
}  

 <main>
  <div class="wrapper">
    <img src="https://placeimg.com/300/300/arch?t=1493746896324/" />
    <div class="cover"></div>
  </div>
</main>  

Плюсы и минусы

Оба вышеуказанных результата окажутся в одной и той же разметке

 <main>
  <div class="wrapper">...</div>
  ......
  <div class="wrapper">...</div>
</main>
  

с той лишь разницей, что при использовании клонирования с true все первоначально назначенные прослушиватели или данные также будут клонированы;
в то время как использование конкатенации = с .outerHTML() — это, по сути, простая конкатенация HTML-разметки с небольшими другими преимуществами.