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

【问题标题】：Error when trying to render a tagged string literal尝试呈现标记的字符串文字时出错
【发布时间】：2019-09-03 02:12:41
【问题描述】：

我正在从 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 标签并按照我的预期对其进行格式化？

谢谢。

【问题讨论】：

标签： javascript html ecmascript-6 string-literals tagged-templates

【解决方案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);

【讨论】：

【解决方案2】：

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

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

【讨论】：

您可以将.append 用于字符串、DOM 节点或两者的混合使用 (see mdn ref). .appendChild 仅是 DOM 节点。 .innerHTML 尝试根据 doctype 解析它分配为 HTML/XML 的文本，而 .append 只是从中创建一个 Text 节点，无论它是否包含可以被解析以生成元素的有效标记文件。