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

Question

我一直在关注如何制作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

如果您希望在构建动态内容时divs or containers持续增长而又不丢失旧内容，请使用jQuery.append

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

这可能是最干净的方法。 或者您可以做其他事情，例如

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

Answer 2

在JavaScript中，您可以通过多种方式生成html内容：

1. 直接使用字符串创建HTML：

    $("#sampleArea").append('<div class="' + newClass + '">' + newText + '</div>'); 

2. 使用jQuery Api包装创建HTML：

    $("#sampleArea").append($('<div/>',{class : newClass}).text(newText)); 

3. 在Javascript中使用模板引擎（例如mustache.js ）：

    <script id="exampleTpl" type="x-tmpl-mustache"> <div class="{{class}}">{{text}}</div> </script> <script> var data = { class: newClass, text: newText } var template = $('#exampleTpl').html(); var html = Mustache.render(template, data); $('#sampleArea').append(html); </script> 

最佳解决方案将取决于您的使用。