如何使用 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);

当此代码运行时, refer_summary 变量实际上包含一个可能包含 HTML 标签的字符串,例如 <b><i> 标签等,但是,这些标签显示在页面而不是呈现他们的行为。

例如,在页面上它会显示 <b> 而实际上是使内容变粗。

附加值后如何呈现 HTML 标记?

在我的 Django 模板中,我使用 {% autoescape off %}{{content}}{% endautoescape %} 所以当我第一次加载页面时,内容会以粗体等正确呈现。但是从 javascript 附加 html 时如何做同样的事情?

谢谢您的帮助!

原文由 user2573690 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 590
2 个回答

您可以使用 document.write() 呈现 HTML

 document.write('<html><body><h2>HTML</h2></body></html>');

但是要附加现有的 HTML 字符串,您需要获取要在其下插入 HTML 字符串的节点/标记的 id。

有两种方法可以实现这一目标:

  1. 使用 DOM -
 var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));

  1. 使用innerHTML -
 var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';

原文由 Shubham Sureka 发布,翻译遵循 CC BY-SA 4.0 许可协议

在附加 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);

原文由 Manoj Patidar 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题