js或jq如何优雅的拼接dom？

Question

平时工作中时常需要根据数据或者配置来拼接一段html代码，当需要拼接的代码非常长时，编写和查看就非常困难，问问各位平时工作或学习中有没有什么既能兼顾性能又能方便编写和查看的dom拼接方式？？？

Answer 1

试试使用``来格式化拼接字符串,支持换行

var a = '789';
var b = `<div>123456${a}</div>`;
console.log(b);

Answer 2

es6中的字符串模板

let data = `<p>fdasjso</p>`

用这个进行字符串拼接，

Answer 3

 `<div class="parent">
        <div class="child">
            <span>
                <i>
                </i>
            </span>
        </div>
    </div>`

Answer 4

var html = [
    '<div class="parent">',
    '    <div class="child">',
    '        <span>',
    '            <i>',
    '            </i>',
    '        </span>',
    '    </div>',
    '</div>',
]
$('body').append(html.join(''))

Answer 5

这个貌似真没有（如果有的话请推荐给我一个）。现在除了某些公共的模板，我也没见着一上来就拼节点的，反正我自己打死不会这么干，能循环嵌套的就循环嵌套，能动态请求刷新的就动态请求，而且现在一直用vue，确实也不怎么会遇见这种糟心事了

其实我之前有这么干过的：声明一个对象，赋值一大段节点，然后打印出来....^_^

Answer 6

如果允许使用ES6的话，可以直接使用字符串模板

var str =
`
<div>
    <div></div>
</div>
`

如果不能使用ES6，要进行字符串换行的话（字符串不允许换行，会报错），可以在每一行最后加上反斜杠

var str =
"\
<div>\
    <div></div>\
</div>\
"

Answer 7

如果你的项目可以使用vue， 就是可以直接使用vue 的模板 去做，不过我看你说的这个情况 ，应该不是使用vue那一套，
根据你说的既要兼顾性能，又要方便查看和编写，可以使用模板引擎
1.artTemplate 腾讯开源的前端模版引擎

<!--用于展示模版的位置-->
<div id="area"></div> 
​
<script src="js/template-native.js"></script>
<!--用于存放模版-->
<script id="template" type="text/html"> 
    <div>
        <% for(i=0;i<content.length;++i) {%>
        <h1><%=content[i].province%></h1>
            <% for(j=0 ; j<content[i].city.length ; ++j){%>
            <p><%=content[i].city[j]%></p>
            <%}%>
        <%}%>
    </div>
</script>
<!--用于渲染模版-->
<script>
  var data={
    content:[
      {province:'四川',city:['成都','绵阳','自贡']},
      {province:'广东',city:['广州','东莞','佛山']},
      {province:'海南',city:['海口','三亚']}
    ]
  };
  var html=template('template',data);
  document.getElementById('area').innerHTML=html
</script>

artTemplate
性能极佳，比字符串拼接和动态生成dom，要快一倍至少，学习成本极低。

1. es6 模板字符串

$('#result').append(`
         There are <b>${basket.count}</b> items
          in your basket, <em>${basket.onSale}</em>
         are on sale!
       `);

[模板字符串] [1]