Question

我一直关注如何制作JS小部件tutorial。但是我注意到用纯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内容：

直接使用字符串创建HTML：

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

使用jQuery Api wrapping创建HTML：

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

在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>

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

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

2 个答案: