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

估计你写成了这样

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 2

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

Answer 3

Element.innerHTML = html

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

Answer 4

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

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

Answer 5

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

Answer 6

我想，你的问题不在于字符串的拼接方式，而在于如何把这个字符串插入到 HTML 文档中。

在 JavaScript 中，HTML 代码是用字符串的形式表示的。如果你直接把这个字符串插入到 HTML 文档中，浏览器会把它当作纯文本处理，而不是 HTML 标签。

要让浏览器把这个字符串作为 HTML 标签处理，你需要把它赋给某个元素的 innerHTML 属性，或者使用 jQuery 的 html() 或 append() 方法等。

在你的例子中，li[length-1].after(fwglPage.uploadText()) 这段代码会把 fwglPage.uploadText() 返回的字符串插入到 li[length-1] 元素的后面。但是，after 方法并不会把这个字符串当作 HTML 代码处理，而是当作纯文本插入的。

而 li.eq(length-1).after(fwglPage.uploadText()) 这段代码中，eq(length-1) 会返回一个 jQuery 对象，然后 after 方法会把 fwglPage.uploadText() 返回的字符串当作 HTML 代码插入到这个对象所代表的元素的后面。

Answer 7

建议使用es6新语法