动态生成具有不同元素的 html 的建议方法

Question

我想动态生成一些元素（事先不知道有多少）并将它们粘合在一起并从本质上扩展一个 div，比如 id 为“myDiv”。出于演示目的，假设客户端收到一条消息，通过扩展 div 动态生成三个按钮的列表。

我被卡住了，因为我生成这样的列表

var temp = "<ul>";
for (i = 0; i < someTimes; i++) {
    temp += "<li>some text <div id=\"button" + i + "\"></div></li>";
}
temp += "</ul>";

然后做

document.getElementById('myDiv').innerHTML = html;

为了生成每个按钮，我最初的意图是 do this 以便将每个按钮附加到在 while 循环中动态生成的适当 div 中。但这东西行不通。对于像我这样的新手来说，也许这里有一些东西；

1. 是否有我可以在 for 循环中使用的 Javascript 示例来动态生成按钮，给它们我想要的 id 并委托它们？
2. 我是否应该将第一部分从 Javascript 转换为 jQuery，然后用 jQuery 同时做这两件事？如何（在本例中）？
3. 这些东西有什么好的参考吗？

提前感谢您抽出宝贵时间。我不希望所有三个问题都得到答案，但我想得到一个关于如何实现这个小目标的答案，作为我如何继续工作的指导。

Answer 1

好吧，我可以向您推荐一个用于模板的库插件。

但我很确定它可以通过几行代码来完成（穷人的模板引擎（crockford）：

if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

那么它将如何工作：

这将是您的结构：（从技术上讲，您可以（并且应该）将其放在文本/模板部分下）

var t= '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td></tr>';

这是绑定部分：

t.supplant({Symbol:'s',Price:2,DayOpen:3})

live example

Answer 2

这就是使用 Jquery 的方式

var $ul = $('<ul></ul>');
for (i = 0; i < someTimes; i++) {
    $ul.appent("<li>some text <div id='button" + i + "'></div></li>");
}
$('#myDiv').append($ul);

Answer 3

您可以在JQuery 中使用appendTo。语法是：

$(content).appendTo(selector)

jquery docs页面上的例子是：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$( "<p>Test</p>" ).appendTo( ".inner" );

编辑：基于评论..

<div class="placeholder"></div>

$( "your generated html" ).appendTo($(".placeholder"));