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

.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);

Answer 2

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

tabooObject中包含的是一个字符串。如果要将字符串添加为HTML，则需要使用innerHTML。

tabooWidget.innerHTML = tabooObject;

以上代码替换了tabooWidget中的整个HTML代码。如果要附加代码，则可以使用普通的旧字符串串联方式进行：tabooWidget.innerHTML += tabooObject;

模板文字会写出HTML，而不是将div呈现为HTML

2 个答案: