JavaScript 代码中的 HTML 生成

Question

我希望了解您对于在我的JS代码中生成HTML代码的想法。

我认为html.push("<tag>" + something + "</tag>")这种方式相当烦人。我已经尝试在我的HTML文件中使用模板(并放置一些占位符)，然后将其内容替换为我的真实值。

但也许您有其他的想法，可能使用jQuery之类的工具。

- gsb

---

你对模板解决方案有什么不喜欢的地方？ - Nosredna

你能否提供更多细节或示例？我不确定你正在尝试做什么。你是想构建 HTML 并调用 something.innerHTML = myhtmlstring，还是想使用 DOM 的 appendChild / replaceChild 函数？ - Jason S

Answer 1

jQuery是一个很好的选择。你可以做出如下操作：

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

• 它具有跨浏览器的兼容性，
• 它是一种易于使用的语法。

还有一个模板插件。

- Mat Ryer

Answer 2

你可以使用 createelement、appendchild 和 innerHTML 来完成这个任务。

这里有一篇来自 A List Apart 的文章 使用这些函数生成下拉菜单。

- Evan Meagher

Answer 3

我非常喜欢PrototypeJS如何处理模板。

首先，您需要创建一个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的内容。

- Mark Biek

Answer 4

jQuery有像jBind和jTemplate这样的javascript模板插件。虽然我自己没有使用过它们，但我推荐尽可能使用jQuery。

关于HTML生成的注意事项是，在大多数情况下，它不可被搜索引擎搜索。

- Scott

Answer 5

Resig在他的博客中介绍了一个非常轻量级的模板系统，具体内容请参考这篇博文。

- cgp

Answer 6

有许多支持此功能的JQuery函数。特别是，您应该查看append(content)、appendTo(content)、prepend(content)、prependTo(content)、replaceWith(content)、after(content)、before(content)、insertAfter(content)和insertBefore(content)。

- Sean