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

我一直在关注如何制作JS小部件tutorial。但是我注意到用纯JavaScript手动构建html不是干的。我打算在JS小部件中构建一个表单，表等。什么是最好的方法来做到这一点？如何在JavaScript小部件中正确生成HTML？

$.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); 
});

来源

2015-04-23 Ronnie Beltran

这不是纯JS。这是jQuery。如果您经常使用JavaScript生成HTML，请使用某种模板引擎。 – CodingIntrigue

尝试使用jQuery append方法（因为您正在使用jQuery），'$（'＃example-widget-container'）。append（myHtml）;' –

EJS，Hogan.js，Dust.js等 - 我喜欢Hogan。 –

如果你想要一个

你divs or containers，当你建立动态的内容，而不会失去旧的内容，请使用jQuery.append

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

这可能是最干净的方式，不断茁壮成长。或者你可以做其他事情一样

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

来源

2015-04-23 11:47:50

在JavaScript中，你可以生成以不同的方式HTML内容：

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

创建HTML：

直接字符串创建HTML jQuery Api wrapping：

$("#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>

最好的解决方案将取决于你的使用。

来源

2015-04-23 12:18:06 jmgross

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

回答

相关问题