---

if ES6 is allowed, you can directly use the string template

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

if you cannot use ES6 , you can add a backslash

at the end of each line if you want to wrap the string (the string does not allow line wrapping, which will cause an error).

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

---

if your project can use vue, you can directly use the template of vue. But I don't think you are using vue in this case.
according to what you said, you should not only take into account performance, but also make it easy to view and write. You can use template engine
1. artTemplate Tencent's open source front-end template engine

<!---->
<div id="area"></div> 

<script src="js/template-native.js"></script>
<!---->
<script id="template" type="text/html"> 
    <div>
        <% for(i=0;i<content.length;PPi) {%>
        <h1><%=content[i].province%></h1>
            <% for(j=0 ; j<content[i].city.length ; PPj){%>
            
<%=content[i].city[j]%>
            <%}%>
        <%}%>
    </div>
</script>
<!---->
<script>
  var data={
    content:[
      {province:'',city:['','','']},
      {province:'',city:['','','']},
      {province:'',city:['','']}
    ]
  };
  var html=template('template',data);
  document.getElementById('area').innerHTML=html
</script>

artTemplate
has excellent performance, at least twice as fast as string concatenation and dynamic generation of dom, and the learning cost is extremely low.

1. es6 template string

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

[template string] [1]

---

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

---

this doesn't seem to exist (if there is one, please recommend one to me). Now, except for some public templates, I don't see anyone who splits nodes in the first place. Anyway, I won't do it myself. I can cycle and nest if I can, and I can request a refresh dynamically if I can. And now I don't really encounter such a bad thing when I use vue, all the time.

I've actually done this before: declare an object, assign a large segment of nodes, and print it. ^ _ ^

---

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

---

try to use ``to format stitching strings. Line breaks are supported

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

---

string template in es6

let data = `
fdasjso
`

use this for string concatenation,