javascript - 如何在 JavaScript 小部件中正确生成 HTML？

Question

我一直在关注这个 tutorial关于如何制作 JS 小部件。但是我注意到用纯 JavaScript 手动构建 html 并不是 DRY。我打算在 JS 小部件中构建表单、表格等。执行此操作的最佳方法是什么？

 $.getJSON(jsonp_url, function(data) {
   var fruits = ["Apples", "Mangoes", "Banana"];
   var myHtml = "<ul>";
   $(fruits).each(function(i){
      myHtml += "<li>" + fruits[i] + "</li>";
   });
   myHtml += "</ul>";
   $('#example-widget-container').html(myHtml);
 });

Answer 1

如果您希望您的 div 或容器之一 在构建动态内容时不断增长，而不丢失旧内容，请使用 jQuery.append

$('#example-widget-container').append(myHtml);

这可能是最干净的方式。或者你可以做其他事情，比如

var html = $('#example-widget-container').html();
newHtml = yourContent;
$('#example-widget-container').html(html + newHtml);