javascript字符串拼接问题？

Question

 var html = '<li>' +
            '<div>' +
            '<i class="fa fa-upload"> 上传</i>' +
            '<input type="file" class="upload-file">' +
            '</div>' +
            '<span class="file-name"></span>' +
            '<button class="new-item">提高</button>' +
            '</li>';

这样拼接的字符串为什么在页面中会以字符方式出现？而并没有成为可以让浏览器解析的标签元素？

目前用自己的方法已经解决，但是不知道原理是怎么回事？
之前： li[length-1].after(fwglPage.uploadText()); //返回的字符
之后： li.eq(length-1).after(fwglPage.uploadText());//返回的html元素

li取到的所有li的集合，fwglPage.uploadText()这个函数返回的就是我这段html。

Answer 1

document.write(html)就可以解析标签元素

Answer 2

Element.innerHTML = html

这样才会把字符串解析为HTML

Answer 3

这段html字符串输出到页面被浏览器解析成了标签，我测试了Chrome和QQ浏览器。

如果实在不想要被浏览器解析，可以对这段字符串进行转义。

Answer 4

估计你写成了这样

var html = '<li>' +
            '<div>' +
            '<i class="fa fa-upload"> 上传</i>' +
            '<input type="file" class="upload-file">' +
            '</div>' +
            '<span class="file-name"></span>' +
            '<button class="new-item">提高</button>' +
            '</li>';
Element.innerText = html;

这是错误的。

Element.innerText = html; 会把代码当文本插入，应该用 Element.innerHTML = html;

Answer 5

为什么不使用es6字符串模板呢，主流浏览器都支持了，草鸡好用

Answer 6

建议使用es6新语法