javascript - html標籤的class屬性裡面怎麼嵌入變數

Question

        var id = snapshot.val().id;
        var content = snapshot.val().content;
        var textObj = '<p 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>\
                        </p>';

我想把第一行的id變數（是一個數字）加到第三行p標籤的class屬性裡面，可以直接嵌進去嗎？

Answer 1

雷雷

Answer 2

你的問題實質是如何改變拼接出來的HTML模板，本質就是拼接字串。
最笨的方法

var textObj1 = '<p 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>\
                    </p>';
textObj = textObj1 + id + textObj2

或直接用ES6 字串模板，這樣比較符合你的變數巢狀。但相容性會有問題。

var textObj = `<p 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>\
                        </p>`;

Answer 3

由於你這個其實是JS拼接字串，所以直接用JS的+將字串拼接進去。
既然你都知道怎麼把content拼接進去了，那拼接id也是同理

ES5

var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = '<p 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>\
</p>';

當然，你也可以使用ES6的模板字串，不過瀏覽器相容性會有問題，具體如下：（注意，整個textObj以`開始，以`結束）

ES6

var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = `<p 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>\
</p>`;

Answer 4

Addattribute 試試