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

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

我坚持，虽然，因为我生成列表这样

然后才能追加做

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

，为了生成每个按钮我最初的意图是再do this每个按钮都是在while循环中动态生成的适当的div。但这个东西不行。对于像我这样的新手来说，这里可能有几件事情。

是否有一个JavaScript示例，我可以在for循环中使用，以便动态生成按钮，给他们我想要的id并委托他们？
我应该将第一部分从Javascript转换为jQuery，然后使用jQuery同时执行这两件事情？如何（在这个例子中）？
这些东西有没有很好的参考？

预先感谢您的宝贵时间。我不希望所有三个问题的答案，但我想就如何实现这个小目标作为如何继续我的工作的指导方针的答案。

来源

2013-09-30 MightyMouse

使用jquery将永远更好 –

谢谢。但是，如何在jQuery中完成这么简单的事情呢？ – MightyMouse

网上有很多例子，在这里有很多问题在stackoverflow。开始的好地方将是 http://api.jquery.com/ –

那么，我可以引用你的模板库插件。

但我敢肯定，它可以用代码AA几行（穷人的模板引擎（克罗克福德）来完成：

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

来源

2013-09-30 13:09:45

这是它是如何使用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);

来源

2013-09-30 13:14:45

对于像我这样的初学者，我真的很喜欢这种方法，但是在你的代码之后，我想写下另一个循环，在那里生成实际的按钮并将它附加到循环所生成的div上。所以，我动态生成按钮（每次迭代都是这样的：http://stackoverflow.com/questions/19072478/dynamic-buttons-with-attributes-through-jquery#19072533），然后生成一个var tempID ='＃按钮'+ i;然后（每次迭代结束）我正在做$（tempID）.append（$ aButton）;但是这不起作用。 – MightyMouse

你应该发布你的代码，或者甚至更好地制作小提琴（http://jsfiddle.net/），因为一般来说，你提出的解决方案应该可以工作 –

做，你可以在JQuery使用appendTo。语法是：

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

编辑：基于评论..

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

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

来源

2013-09-30 13:18:33 christiandev

我想说的是，“inner”类的div会去在飞行中生成。所以，不，这不适合我。这是我的想法：用div生成html说，然后使用document.getElementById（'container'）。innerHTML = html;之后，当divs准备就绪时，我会追加到“内部”。说得通？ – MightyMouse

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

回答

相关问题