Как правильно выводить шаблон js через цикл?

Question

[Василий]

Получаю ошибку при попытке вывести шаблон на страницу

.then(function(result) {

        let response = document.querySelector('.response');

        for(let i = 0; i < result.data.length; i++){
        
            response.innerText(`

                <div class="lang-block">
                    <div class="lang-block__logo">
                        <img src="${result.data[i].logo}">
                    </div>
                    <div class="lang-block__description">                            
                        <p><b> ${result.data[i].name} </b></p>
                        <p>Основан в ${result.data[i].year}</p>
                        <p>${result.data[i].year} проектов на Github</p>
                        <p><a href="${result.data[i].docs}">Документация</a></p>

                    <div>
                </div>
            `);

        }
        
    })

Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Answer 1

[Сергей Соколов]

1. в приведённом фрагменте отсутствует метод appendChild(), упомянутый в ошибке.
   
2. innerText это не метод, а свойство.
   
3. чтобы в цикле не перезаписывались, а накапливались элементы, надо складывать.
   

.then(function(result) {
  const el = document.querySelector('.response');
  let html = ''; // здесь соберём html всех блоков из цикла
  for(let i = 0, len = result.data.length; i < len; i++){
    const data = result.data[i];
    html += ` ... <img src="${data.logo}"> ... `;
  }
  el.innerHTML = html;
})

Comments

[Василий]

Работает, спасибо!)

[alex-1917]

а мы, дураки, лепим createElement, а тут вот оно как оказывается можно...
)))