Javascript Json中的短HTML代码将显示HTML代码，而不是呈现的版本

我正在检索一个填充了用户数据的数组。它们应显示在

ul

中。其中一个字段是每个用户的前缀，如下面的html代码

[Admin]

。但是，当我尝试附加li元素时，它会呈现html代码，而不是span的红色版本

我的json代码：

{
    "users":[
        {
            "id":"1",
            "usrname":"YannickFelix",
            "email":"example@gmail.com",
            "lvl":"4",
            "prefix":"<span class=\"red-text\">[Admin]<\/span>"
        }
    ]
}

{
“用户”：[
{
“id”：“1”，
“usrname”：“YannickFelix”，
“电子邮件”：example@gmail.com",
“等级”：“4”，
“前缀”：“[Admin]”
}
]
}

还有我的javascript：

listElemTmplt = `
    <li class="collection-item avatar">
    <i class="material-icons circle {"{{color}}"}">person</i>
    <span class="title">{"{{usrname}}"}</span>
        <p>{"{{prefix}}"} {"{{usrname}}"} | {"{{email}}"}
        </p>
        <span class="secondary-content">
        <a class="waves-effect waves-circle" href="users.php?action=edit&uID={"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">create</i>
        </a>
        <a class="waves-effect waves-circle waves-red modal-trigger" href="#modal{"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">delete</i>
        </a>
    </span>
    <div id="modal{"{{id}}"}" class="modal">
        <div class="modal-content black-text">
            <h4>L&ouml;schen</h4>
            <p>M&ouml;chtest Du den Benutzer "{"{{usrname}}"}" wirklich l&ouml;schen?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Abbrechen</a>
            <a href="users.php?action=del&vID={"{{id}}"}" class="modal-action modal-close waves-effect waves-green btn-flat red-text">L&ouml;schen</a>
        </div>
    </div>
</li>
`;

template = Handlebars.compile(listElemTmplt);
finishedString = [];
$.getJSON("**url**", function (data) {
    console.log(data);
    $("ul#users").html("");
    data["users"].forEach(function (element, index, array) {
        html = template({"{"}id: element["id"], usrname: element["usrname"], email: element["email"], prefix: element["prefix"]{"}"});
        $("ul#users").append(html);
    });
});

listlemtmplt=`

人
{{{usrname}}
{{{prefix}}{{{usrname}}}{{{email}}}

Lö；申
Mö；在贝努泽尔{{{usrname}}维克利奇lö；申


`;
template=handlebar.compile（listElemTmplt）；
finishedString=[]；
$.getJSON（“**url**”，函数（数据）{
控制台日志（数据）；
$（“ul#users”）.html（“”）；
数据[“用户”].forEach（函数（元素、索引、数组）{
html=模板（{{{}id:element[“id”]、usrname:element[“usrname”]、email:element[“email”]、prefix:element[“prefix”]{}）；
$（“ul#users”）.append（html）；
});
});

列表中的示例项。[Admin]应为红色且不带html代码

---

使用

{{prefix}

时，手柄会转义您给它的值。当您想要使用原始HTML时，您必须使用

{{{{{prefix}}}

来告诉它不要转义它

如果不使用手柄，也可以使用jQuery的。