html标签的class属性里面怎么嵌入变量

Question

        var id = snapshot.val().id;
        var content = snapshot.val().content;
        var textObj = '<div class="task-item">\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">&nbspdetail</span>\
                        </div>';

我想把第一行的id变量（是一个数字）加到第三行div标签的class属性里面，可以直接嵌进去吗？

Answer 1

    var id = snapshot.val().id;
    var content = snapshot.val().content;
    var textObj = '<div class="task-item'+id+'">\
                    <input type="checkbox" />\
                    <span class="ui-icon ui-icon-clock"></span>\
                    <span class="task-content">'+content+'</span>\
                    <span class="task-detail">&nbspdetail</span>\
                    </div>';

Answer 2

你的问题实质是如何改变拼接出来的HTML模板，本质是拼接字符串。
最笨的方法

var textObj1 = '<div class="task-item"';
var textObj2 = '>\
                    <input type="checkbox" />\
                    <span class="ui-icon ui-icon-clock"></span>\
                    <span class="task-content">'+content+'</span>\
                    <span class="task-detail">&nbspdetail</span>\
                    </div>';
textObj = textObj1 + id + textObj2

或者直接用ES6 字符串模板，这样比较符合你的变量嵌套。但兼容性会有问题。

var textObj = `<div class="task-item${id}">\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">&nbspdetail</span>\
                        </div>`;

Answer 3

由于你这个其实是JS拼接字符串，所以直接用JS的+将字符串拼接进去。
既然你都知道怎么把content拼接进去了，那拼接id也是同理

ES5

var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = '<div class="task-item' + id + '">\
    <input type="checkbox" />\
    <span class="ui-icon ui-icon-clock"></span>\
    <span class="task-content">' + content + '</span>\
    <span class="task-detail">&nbspdetail</span>\
</div>';

当然，你也可以使用ES6的模板字符串，不过浏览器兼容性会有问题，具体如下：（注意，整个textObj以`开始，以`结束）

ES6

var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = `<div class="task-item${id}">\
    <input type="checkbox" />\
    <span class="ui-icon ui-icon-clock"></span>\
    <span class="task-content">${content}</span>\
    <span class="task-detail">&nbspdetail</span>\
</div>`;

Answer 4

原生太麻烦了，用框架吧

Answer 5

Addattribute 试试