如何在JavaScript文件中编写HTML ?

最简单的答案老实说就是使用像句柄这样的模板语言。

这里有一个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" />'

发表评论

电子邮件地址不会被公开。 必填项已用*标注