Шаблонный литерал записывает HTML вместо того, чтобы div отображался как HTML

Question

Это весь мой файл скрипта (baseURL не показан), который возвращает 6 объектов по запросу при загрузке страницы (что можно проверить, если используется console.log (tabooObject)).

Моя проблема в том, что это не рендеринг 6 div-ов (tabooObject) на моей странице, а просто HTML-код, записанный со значениями имени, вместо того, чтобы фактически отображать div-ы.Другими словами, я вижу: <div class="col"> <div class="name">Hey You!</div>... в моем браузере.

const tabooWidget = document.querySelector('.taboo.widget'); //parent div

fetch(`${baseURL}`)
    .then(response => response.json())
    .then(data => {
        for(let i = 0; i < data.list.length ; i++){
            let name = data.list[i].name; 
            let tabooObject = `
            <div class="col">   
                <div class="name">${name}</div>
            </div>`;
            tabooWidget.append(tabooObject);
        }
    })
    .catch(error => console.error(error))

Answer 1

let tabooObject = `
<div class="col">   
  <div class="name">${name}</div>
</div>`;

Внутри tabooObject есть строка.Если вы хотите добавить строку в виде HTML, вам нужно использовать innerHTML.

tabooWidget.innerHTML = tabooObject;

Приведенный выше код заменяет весь HTML-код внутри tabooWidget.Если вы хотите добавить код, вы можете сделать это простым способом конкатенации старой строки: tabooWidget.innerHTML += tabooObject;

Answer 2

.append() ожидает node, а не строку HTML.Вместо строки создайте узел следующим образом:

// First create and configure the parent node
let tabooObject = document.createElement("div");
tabooObject.classList.add("col");

// Then its child
let tabooChild = document.createElement("div");
tabooChild.classList.add("name");
tabooChild.textContent = name; // Might need .innerHTML depending on what name holds

// Then append the child to the parent
tabooObject.appendChild(tabooChild);

// Then the whole thing to your widget
tabooWidget.append(tabooObject);