javascript - 使用 javascript 将数据插入到预先形成的 dom 元素中

Question

我正在编写一个相当大量的 javascript 网页，并且想知道是否有一种更简洁的方法来编写将插入到 dom 中的 html 元素。目前我正在做类似的事情:

var some_div = "<div class='yaba daba doo' "
some_div += "data-foo='" + some_handy_variable + "'>" + some_html_content + "</div>";

这应该呈现为:

<div class='yaba daba doo' data-foo='some handy id'>html content</div>

但是到达那里的过程并不容易解析:(有没有办法预先形成 div 即

var some_div = "<div class='yaba daba doo' data-foo=''></div>"

然后以某种方式插入数据/变量，然后将 some_div 变量呈现为

<div class='yaba daba doo' data-foo='some handy id'>html content</div>

Answer 1

您是否考虑过使用模板框架，例如Handlebars.js ？它可能会帮助您整理您提到的 JS 代码。你会有这样的对象:

var o = { Class: 'yaba daba doo', Data-Foo: 'Some handy id', html: 'Something here' }

还有一个 myTemplate ，如下所示:

<div class='{{Class}}' data-foo='{{Data-Foo}}'>{{html}}</div>

然后，您可以使用该模板填充您需要的任何数据。

var template = Handlebars.Compile(myTemplate);
var myResult = template(o);

我知道这并不完全是您所要求的，但只是试图提供一个解决方案，可以帮助您保持一切清洁和更具可扩展性。 :) 考虑一下!