时间戳

首页 > 解决方案 > 模板文字写出 HTML 而不是 div 被呈现为 HTML

javascript - 模板文字写出 HTML 而不是 div 被呈现为 HTML

问题描述

这是我的整个脚本文件（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))

标签： javascriptdomfetch

解决方案

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

你里面tabooObject有一个字符串。如果要将字符串添加为 HTML，则需要使用 innerHTML。

tabooWidget.innerHTML = tabooObject;

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

推荐阅读