最简单的答案老实说就是使用像句柄这样的模板语言。
这里有一个JSFiddle展示了一个实际操作的例子。
这比其他的方法更强大，也能让你的代码库保持干净。当然，你也可以不用jQuery或Handlebars来做这些事情。我并不是在提倡这两种方法，只是在使用一些可以帮助你做到这一点的东西。传统的方法通常涉及到在你的JS中间的非常疯狂的多行字符串。它们通常是不灵活的。
这要放在你的HTML中：
title: <input id="title-input" value="" /> <br>
body: <input id="body-input" value="" /> <br>
<button id="add-content">Add Content</button> <br>
<div id="my-content"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>然后这个放在js里面：
var contentElement = $('#my-content');
var addButtonElement = $('#add-content');
var titleInput = $('#title-input');
var bodyInput = $('#body-input');
var contentTemplate = Handlebars.compile($('#entry-template').text());
function addContent() {
var newData = contentTemplate({
title: titleInput.val(),
body: bodyInput.val()
});
contentElement.html(newData + contentElement.html());
// clean up inputs
titleInput.val('');
bodyInput.val('');
}
addButtonElement.on('click', addContent);目前回答的另外两个人把你的问题解释为 "我如何使用JavaScript输出HTML"。他们可能是对的，但你的意思可能是 "如何在JavaScript文件中输入HTML"。
如果你的意思是后者，那就比看起来简单多了。只要HTML代码用引号括起来，JavaScript就会把它当作一个简单的文本字符串。你可能会遇到的最大问题是，HTML字符串可以包含属性等引号。
<img src="page.html" />如果该HTML用双引号(")括起来，JS解释器会认为第一个双引号是字符串的结尾，并抛出一个错误。
为了防止与引号相关的问题，对所有的HTML选择单引号或双引号，对所有的Javascript选择相反的引号，然后保持一致。比如说：
var htmlString = '<img src="page.html" />'
