如何在 javascript 变量中插入 html 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8126074/
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 can I insert html code inside a javascript variable?
提问by Zanrok
So I am pulling information from google calendar and I need to divide the variables I am receiving so I can display them in different divs. So what i need to do is something like this
所以我从谷歌日历中提取信息，我需要划分我收到的变量，以便我可以在不同的 div 中显示它们。所以我需要做的是这样的事情
var divMonth = '<div id ="rawr">';
var divMonthClose = '</div>';
dateString = divMonth + monthName + divMonthClose + ' | ' + parseInt(dateMonth, 10);
However, as you imagine the result displayed is...
但是，正如您想象的那样，显示的结果是......
"<div id ="rawr">December</div> | 8"
It does not actually interpret the html and make the div layer. So my question is.. How can i insert html code within the variable so it actually works as html? Is there a function I am missing or is it even possible?
它实际上并不解释 html 并制作 div 层。所以我的问题是.. 我怎样才能在变量中插入 html 代码，以便它实际上作为 html 工作？是否有我缺少的功能，甚至可能吗？
Thanks in advance for any help or ideas you might have!
在此先感谢您提供的任何帮助或想法！
回答by Jesse
You have this post tagged as jquery, so you could do something like so:
您将此帖子标记为 jquery，因此您可以执行以下操作：
var monthName = 'December';
var dateMonth = 31;
var ele = $('<div></div>')
.attr('id', 'rawr')
.html(monthName + ' | ' + parseInt(dateMonth, 10));
$('#container').append(ele);
回答by AlQafir
use the createElement function:
使用 createElement 函数：
var elm = document.createElement('div');
elm.setAttribute('id', 'rawr');
elm.innerHTML = THE_CODE_AND_TEXT_YOU_NEED_INSIDE_THE_DIV;
when you want to add it to the document:
当您想将其添加到文档时：
$('MYELEMENT').append(elm);
where MYELEMENT is (obviously) the element you want to append the new div to.
其中 MYELEMENT 是（显然）您要将新 div 附加到的元素。
回答by Panagiotis Panagi
Assuming that you want the html structure to be something like:
假设您希望 html 结构类似于：
<div id="wrapper">
...
<div id="date">
<div id="rawr">
</div>
</div>
</div>
you can create the html code and add the content with one line:
您可以创建 html 代码并添加一行内容：
$("#wrapper").append('<div id="date"><div id="rawr">'+monthName+'</div> | '+parseInt(dateMonth, 10)+'</div>');
回答by whytheplatypus
If you want it without jQuery something like this would work:
如果你想在没有 jQuery 的情况下使用这样的东西：
var divMonth = document.createElement('div');
divMonth.id = 'rawr';
divMonth.innerHTML = monthName + ' | ' + parseInt(dateMonth, 10);
document.getElementById("where_you_want_to_put_this").appendChild(divMonth);
回答by likestoski
I think you might be better off separating your display from your logic and update a div or span (when you want display inline) using JQuery. Something like the following.
我认为您最好将显示与逻辑分开并使用 JQuery 更新 div 或跨度（当您想要内联显示时）。类似于以下内容。
<div id='rawr'>
<span id='updateme'></span>
</div>
<div id='rawr'>
<span id='updateme'></span>
</div>
<script>
$("#updateme").html(monthName);
</script>
<script>
$("#updateme").html(monthName);
</script>
