javascript - Bagaimana untuk membenamkan pembolehubah dalam atribut kelas teg html

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>';

Saya ingin menambah pembolehubah id (iaitu nombor) dalam baris pertama ke atribut kelas tag p dalam baris ketiga Bolehkah ia dibenamkan secara langsung?

Answer 1

    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 2

Intipati soalan anda ialah cara menukar templat HTML yang disambung Intinya adalah untuk menyambung rentetan.
Kaedah paling bodoh

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

Atau gunakan templat rentetan ES6 secara langsung, yang lebih sesuai dengan sarang pembolehubah anda. Tetapi akan ada masalah keserasian.

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

Memandangkan anda sebenarnya menggabungkan rentetan menggunakan JS, perkara yang sama berlaku jika anda menggunakan JS secara langsung+将字符串拼接进去。
既然你都知道怎么把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>';

Sudah tentu, anda juga boleh menggunakan rentetan templat ES6, tetapi akan ada masalah dengan keserasian penyemak imbas, seperti berikut: (Perhatikan, keseluruhan

sudah tamat) 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

Atribut tambah cubalah