尝试呈现标记的字符串文字时出错

Question

我正在从 API 获取一些数据，然后对于返回的每个元素我是运行这个代码：


fetch("./apifiles.json").then((res) => res.json()).then((users) => {
        users.usuarios.forEach(e => {

            var div = document.createElement("DIV");

            content = `<h5>usuario:</h5> ${e.name} 
            <h5>id: </h5>${e.id}
            `;

            div.append(content)
            document.body.appendChild(div);
        });
    })

我期待浏览器理解和解析 de "content" 变量中的 HTML 标签，然而这是我在浏览器中得到的：

<h5>usuario:</h5> srth <h5>id: </h5>0
<h5>usuario:</h5> mthaz <h5>id: </h5>1
<h5>usuario:</h5> oatrz <h5>id: </h5>2

显然我做错了什么。我该怎么做才能让浏览器理解 HTML 标签并按照我的预期对其进行格式化？

谢谢。

Answer 1

您需要将其添加为 innerHTML 到 div

let e = {
  id: 1,
  name: 'some name'
}

var div = document.createElement("DIV");

let content = `<h5>usuario:</h5> ${e.name} 
        <h5>id: </h5>${e.id}
        `;

div.innerHTML = content
document.body.appendChild(div);

Answer 2

而不是 div.append(content)，使用 div.innerHTML = content。

附加用于 DOM，不用于字符串。

尝试呈现标记的字符串文字时出错

Error when trying to render a tagged string literal

html

javascript

string-literals

ecmascript-6

tagged-templates