如何使用 Javascript 以字符串形式呈现 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41843654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render HTML in string with Javascript?
提问by user2573690
I have the following javascript code:
我有以下 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);
When this code runs, the refer_summaryvariable actually contains a string which may contain HTML tags such as <b>, <i>etc., however, those tags are displayed on the page instead of rendering their behavior.
当此代码运行时，refer_summary变量实际上包含其中可能包含HTML标签，如字符串<b>，<i>等等，但是，这些标签显示的页面，而不是使他们的行为上。
For example, on the page it would show <b>rather actually making the content bold.
例如，在页面上它会显示<b>而不是实际使内容加粗。
How can I go about rendering the HTML tags when the value is appended?
附加值时如何呈现 HTML 标签？
In my Django template I use {% autoescape off %}{{content}}{% endautoescape %}so when I first load the page, the content is rendered correctly with bold etc. But how can I do the same thing when appending the html from javascript?
在我使用的 Django 模板中{% autoescape off %}{{content}}{% endautoescape %}，当我第一次加载页面时，内容以粗体等正确呈现。但是从 javascript 附加 html 时，我如何做同样的事情？
Thanks for the help!
谢谢您的帮助！
采纳答案by SS_25
You can render HTML using document.write()
您可以使用document.write()呈现 HTML
document.write('<html><body><h2>HTML</h2></body></html>');
But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.
但是要附加现有的 HTML 字符串，您需要获取要在其下插入 HTML 字符串的节点/标签的 id。
There are two ways by which you can possibly achieve this:
您可以通过两种方式实现这一目标：
- Using DOM -
- 使用 DOM -
var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));
node.appendChild(newNode);
- Using innerHTML -
- 使用innerHTML -
var tag_id = document.getElementById('tagid');
tag_id.innerHTML('HTML string');
回答by Manoj Patidar
Use $.parseHTML before the append html like as
在追加 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);
回答by weigel
You can use Javascript's document.createRange().createContextualFragment:
您可以使用 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>
*/
