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

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.

Append 用于 DOM，而不用于字符串。