您正在寻找的是“模板”。
您有一个 HTML 模板(一些 div 等),并将其与您在 JS 中提供的数据绑定。然后,无论您使用什么模板引擎,您都可以获得完整的 HTML。
这里有一些模板引擎:
以及使用板块的代码示例:
var Plates = require('plates'); // specific to node.js, see for client-side use
var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };
var output = Plates.bind(html, data);
console.log( output ); // '<div id="test">New Value</div>'
您可以将模板存储在通过 ajax 加载的单个文件(“templates.html”)中,也可以将其存储在 HTML 页面中(不建议用于维护问题)。
如果将它们全部存储在外部文件中,则可以执行以下操作:
模板.html:
<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1">
<!-- put your template in there
</script>
您可以通过getElementById( 'template1' )
.