Javascript 使用不同元素动态生成html的建议方法

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

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

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

为了生成每个按钮，我最初的意图是将每个按钮附加到while循环中动态生成的相应div中。但是这个东西不起作用。也许对于像我这样的新手来说，这里有一些东西

是否有一个Javascript示例，我可以在for循环中使用它来动态生成按钮，给它们我想要的id并委托它们

我是否应该将第一部分从Javascript转换为jQuery，然后用jQuery同时完成这两件事？如何（在本例中）

这些东西有好的参考吗

---

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

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

但我非常确定，只需几行代码就可以完成（可怜人的模板引擎（crockford））：

那么它将如何工作：

这就是你的结构：（从技术上讲，你可以（而且应该）把它放在文本/模板部分）

var t='{Symbol}{Price}{DayOpen}'；

这是绑定部分：

t.replacement（{Symbol:'s'，Price:2，daydopen:3}）

---

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);

var$ul=$（'
'）；
for（i=0；i<有时；i++）{
$ul.appent（“
某些文本”
”；
}
$（'#myDiv'）。追加（$ul）；

您可以在

JQuery

中使用。语法为：

$(content).appendTo(selector)

jquery文档页面上的示例是：

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

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

问候语
你好
再见
$（“测试”
”）。附录（“.inner”）；

编辑：基于评论

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

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

$（“生成的html”）.appendTo（$（.placeholder”）；

使用jquery总是会更好。但是，在jquery中如何做这样一件简单的事情呢？stackoverflow中有很多在线示例和很多问题。一个好的开始是接收消息的样子是什么？什么格式的json，xml？接收消息将是一个json，表示发送了多少次我们必须迭代（实际上不止这些，但我相信这就足够了）。我想说的是，类为“inner”的div将在运行中生成。因此，不，这对我来说不是真的有效。这是我的想法：用div生成html，然后使用document.getElementById（'container'））.innerHTML=html；在这部分之后，当div准备就绪时，我将附加到“inner”。有意义吗？对于像我这样的初学者，我非常喜欢这种方法，但在编写代码之后，我想写下另一个循环，在其中生成实际的按钮，并将其附加到使用循环生成的div上。因此，我会动态生成按钮（每次迭代都是这样：），然后生成一个var tempID='#button'+i；，然后（每次迭代结束时）我正在执行$（tempID）.append（$aButton）；但这不起作用。您应该发布代码，或者更好地制作一个fiddle（），因为一般来说，您提出的解决方案应该有效

<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"));