jquery - javascript操作dom时如何避免在js代码中写html?

Question

描述你的问题

靠ajax实现页面不刷新添加数据时？如果添加记录成功，经常用js实现插入html元素的操作。比如，在table中插入一个tr之类的。这类的代码改如何写才既优雅又便于维护呢？

---

贴上相关代码

我之前刚写js代码时这类的处理都是直接jquery写，类似: $(xxx).html("xxxxx")这种代码。这样写虽然页面上的效果看起来还不错，但是代码上真心难以维护, 业务稍微复杂一些就经常会写出js中以字符串的形式编写html，而这些html中又包含有js的代码，这样写的时候还可以接受，但是如果要修改的话就太恐怖了……

这里随便贴一段代码, 大家一起体会一下:

$.post("${ctx}/sys/goods/goodsFullInfo", {goodsId:this,cardId:$("#CustomerCard").val()}, function (data){
    if (data.goodsId != null) {
        var trObjects = $("#goodsAdd").find('tr');
        var html = "<tr>"+
         "<td>"+(trObjects.length-1)+" </td>"+
        "<td><input type=\"hidden\" name=\"goodsId\" value=\""+data.goodsId+"\">"+data.name+"</td>"+
        "<td>"+data.brandName+"</td>"+
        "<td><input type='text' name='goodsCount' id = 'countId"+data.goodsId+"'  onblur='calcTotalPrice("+data.goodsId+")'><input type='hidden' name='goodsPrice' value = '"+data.price+"'></td>"+
        "<td> <p> <a title=\"删除\" style=\"margin-left: 2px;\" href=\"#\" onclick=\"top.$.jBox.confirm('确认要删除该商品吗？', '系统提示', delDomTr, { buttons: { '确定': this, '取消': false} })\">删除</a></p></td>"+
        "</tr>";
         $("#goodsAdd").append(html);
    }
});

这种代码不算复杂，还有比这个复杂的多的， 这些代码写在html中也就算了，更让人揪心的是，这种代码整个项目中导出都是，如果要修改个功能，得研究半天这些字符串，还经常标签对不起。鸭梨真心很大……

---

已经尝试过哪些方法仍然没解决（附上相关链接）

尝试过直接用js创建dom对象，然后设置属性添加数据，但是那样感觉好啰嗦，不知道有没更好的方法？

听说过双向数据绑定，感觉这个是建立在组件化开发的基础上的. 不知道还有其它方法没，最好给个示例代码让俺学习下。

Answer 1

前端模板
或者直接上angular或者vue.js

Answer 2

可以去学习一下 js模板, 比如 artTemplate

https://github.com/aui/artTemplate

Answer 3

也可以clone复制结构;
或者创建一个变量，内容为html;
或者创建一个函数，回调时执行函数。

Answer 4

直接上react啊

jquery干这种事情，代码一多，几乎是无法维护的

Answer 5

感觉用模板框架会好点吧，我也不太清楚。一直在用html中写用于clone的dom(隐藏),然后用的时候clone。同求更好的方法

Answer 6

如果换lib/框架不容易, 可以从HTML中不再嵌套一层JS开始...
以你的例子来说, 新HTML里的onclick可以用data-attribute / Event Delegation代替

Answer 7

直接上mvvm框架吧

Answer 8

这是jquery作者写的模板替换，就一个方法，还带缓存。非常好用。
http://ejohn.org/blog/javascript-micro-templating/

Answer 9

使用模板引擎去渲染html