大量的重复的html标签元素。比如40a 50img 30div 如何操作？ 是直接复制粘贴html 还是用js操作呢？

Question

大量的重复的html标签元素。比如40个a标签类容不一样 50img 30div 如何操作？ 是直接复制粘贴html 还是用js操作呢？哪个更好呢？

Answer 1

• 最简单的一个办法，自己构建个最原始的js模板，然后动态的输出去，这个思路并不难，技术上也不难。

• 字符串拼接也是可以的，只是比较low而已。

• 引入第三入模板也是可以的，只是文件有点大，有一定的学习成本而已。

在线demo

var tpl = function(html, data){
    return html.replace(/{{(\w+)}}/g, function(item, a, b){
        return data[a];
    });
}
var wrap = function(html, data){
    var result = '';
    for(var i = 0; i < data.length; i++){
        result += tpl(html, data[i]);
    }
    return result;
}
var str = '<h1>{{name}}</h1><p>{{age}}</p>';
var json = [
    { name : 'jikey', age : 30 },
    { name : 'tang', age : 10 },
    { name : 'hq', age : 20 }
]
document.getElementById('div').innerHTML = wrap(str, json);

参考：

• JavaScript模板引擎原理，几行代码的事儿

Answer 2

静态页面写html不就行了。

Answer 3

刚开始，没仔细看楼主问题，想这，用 emmet 就行了。
现在看明白了，楼主的意思是相比较两种情况下那种方式最好，肯定是用JS吧！你可以控制输出内容，大小，什么时候显示等。