JS代码中的HTML生成

Question

我想知道您对我的JS代码中HTML代码生成的想法。

我只是认为html.push("<tag>" + something + "</tag>")风格很烦人。 我已经在我的HTML文件中尝试了一些模板（并在其中放置了一些占位符），然后使用它的内容将占位符替换为我的真实值。

但也许你们有其他想法，可能使用jQuery。

Answer 1

jQuery有javascript模板插件，如jBind和jTemplate。我没有使用它们，但我尽可能地推荐jQuery。

有关html代的注意事项，在大多数情况下搜索引擎无法搜索它。

Answer 2

您可以使用createelement,appendchild和innerHTML来执行此操作。

这里的an article from A List Apart在生成下拉菜单的过程中使用这些函数。

Answer 3

jQuery是要走的路。你可以做这样的事情：

// create some HTML 
var mySpan = $("<span/>").append("Something").addClass("highlight"); 

• 它是跨浏览器兼容，
• 它是一个易于使用的语法

还有一个templating plugin。

Answer 4

我很喜欢PrototypeJS如何处理templates。

首先创建Template类的一个实例，并将其传递给包含模板HTML的字符串。

var tpl = new Template('Here is a link to <a href="#{link}">#{sitename}</a>'); 

然后，您将包含要在模板中替换的值的数据传递给它。

$('someDiv').innerHTML = tpl.evaluate({link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'}); 

在上面的例子中，我有ID =“someDiv”一个div，我与模板评估的结果替换div的内容。

Answer 5

有一堆支持这个的JQuery函数。特别是，您应该看看append(content),appendTo(content)prepend(content)prependTo(content),replaceWith(content),after(content),before(content),insertAfter(content)和insertBefore(content)。

Answer 6

Resig在创建一个非常轻量级的模板系统时有一点blog entry。