Question

有没有办法在＆＃39; createTextNod＆＃39;中插入HTML标记。或者我还能做什么

$.each(JSON.parse(results), function(i, field){
            for(var i = 1; i < JSON.parse(results).length; i++) {
                var newLi = document.createElement('li');
                var textNode = document.createTextNode(field.fname + ' ' + field.lname + ((field.status == 1) ? '<span class="userChatNameOnline">online</span>' : ''));
                newLi.appendChild(textNode);
                var ul = document.getElementById('ulUsers');
                ul.insertBefore(newLi, ul.childNodes[0]); 
            }
        })

Answer 1

问题

OP代码的以下部分非常糟糕：

knex('patrol')
  .select(knex.raw(`*, 'Patrol' as "$type"`)
  .where('id', 12345)
  .first()

$.each(JSON.parse(results), function(i, field){ for(var i = 1; i < JSON.parse(results).length; i++) {...遍历JSON中的每个$.each()即可。但你使用另一个循环，这是完全不必要的，因为field和$.each()循环都遍历数组。这些循环中的每一个都在每次迭代时调用for。虽然不管这有多糟糕，但除非您处理大量数据，否则您可能永远不会注意到任何延迟。

参考

以下是所用内容的链接：

Template Literals

<强> .insertAdjacentHTML()

演示

＆＃13;

JSON.parse()

＆＃13;

var results = `[{"first":"Kaiser","last":"Soze","status":"1"},{"first":"Darth","last":"Vader","status":"0"},{"first":"Boba","last":"Fett","status":"0"},{"first":"Grim","last":"Reaper","status":"1"},{"first":"zer0","last":"0ne","status":"1"}]`;

var JSONData = JSON.parse(results);

var list = document.getElementById('users');

$.each(JSONData, function(idx, field) {
  var name = `[${idx}]: ${field.first} ${field.last}`;
  var status = `<b class='status' data-status='${field.status}'>${field.status === "1" ? 'Online' : 'Offline'}</b>`;
  list.insertAdjacentHTML('beforeend', `<li class='userData'>${name}&nbsp;&nbsp;${status}</li>`);
});

＆＃13;

#users {
  width: 50%;
  list-style: none
}

.userData {
  font: 400 16px/1.5 Consolas
}

.status {
  float: right
}

[data-status='1'] {
  color: green
}

[data-status='0'] {
  color: red
}

＆＃13;

Answer 2

createTextNode用于专门创建TextNode，而不是插入HTML。对于后者，您可以使用innerHTML或insertAdjecentHtml

Answer 3

由于您使用的是jQuery，因此您可能只想使用$()和.html()创建节点：

$.each(JSON.parse(results), function(i, field){
    var ul = $('#ulUsers');
    for (var i = 1; i < JSON.parse(results).length; i++) {
        var li = $('<li></li>').html('<span>' + ... + '</span>');
        ul.before(li);
    }
}

如果您想简化它，我建议附加到DocumentFragment，然后一次性将片段的内容附加到#ulUsers。如果你传递一个要附加的元素数组，jQuery会封装它（当然，如果你想在列表中添加元素时看到列表增长的动态效果，你就不会（需要）这样做）：

$.each(JSON.parse(results), function(i, field){
    var ul = $('#ulUsers');
    var li_array = [];
    for (var i = 1; i < JSON.parse(results).length; i++) {
        var li = $('<li></li>').html('<span>' + ... + '</span>');
        li_array.push(li);
    }
    ul.before(li_array);
}

如何在createTextNode中插入代码

3 个答案:

问题

参考

演示