如何用Javascript呈现字符串形式的HTML？

我有以下javascript代码：

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
$("#references").append(html);

var html=''+referer\u summary+''+referer\u name+''；
$（“#参考”）.append（html）；

当此代码运行时，

refereu\u summary

变量实际上包含一个字符串，该字符串可能包含HTML标记，例如

，

等，但是，这些标记显示在页面上，而不是呈现其行为

例如，在页面上，它会显示

，而实际上是将内容加粗

当附加值时，如何呈现HTML标记

在我的Django模板中，我使用了

{%autoescape off%}{{content}{%endautoescape%}

，因此当我第一次加载页面时，内容会正确地以粗体等形式呈现。但是，当从javascript中附加html时，我如何做同样的事情呢

---

谢谢你的帮助

在附加html之前使用$.parseHTML，如

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
html = $.parseHTML( html);
$("#references").append(html);

var html=''+referer\u summary+''+referer\u name+''；
html=$.parseHTML（html）；
$（“#参考”）.append（html）；

您需要分配一个特定的div id，然后相应地处理/更改特定div中的UI

---

这是一个很好的解释

您可以使用document.write（）呈现HTML

使用innerHTML-

var tag_id=document.getElementById（'tagid'）；
tag_id.innerHTML='HTML字符串'；

您可以使用Javascript的

document.createRange（）.createContextualFragment

：

const frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
  #document-fragment
    <div>One</div>
    <div>Two</div>
*/

const frag=document.createRange（）.createContextualFragment（'OneTwo'）；
控制台日志（frag）；
/*
#文档片段
一个
两个
*/

---

如果要在ReactJS中执行此操作，可以使用“DangerlySetinerHTML”属性，而不是“innerHTML”属性

由于它允许攻击者注入代码（XSS），因此被命名为危险

const myHtmlData = `
    <ul>
        <li>Item1<li>
        <li>Item2<li>
    </ul>`;
...
<div
    dangerouslySetInnerHTML={{
        __html: myHtmlData
}}>

const myHtmlData=`

项目1

第2项

`；
...

听起来像是XSS攻击即将发生。其他方法在Outsystems中对我不起作用，但这是完美的。谢谢。2的优点是没有像

write

那样创建新元素/dom，1也不会被创建。这似乎是一个纯粹的解决方案。

const myHtmlData = `
    <ul>
        <li>Item1<li>
        <li>Item2<li>
    </ul>`;
...
<div
    dangerouslySetInnerHTML={{
        __html: myHtmlData
}}>