javascript - 如何在 createTextNode 中插入代码

Question

有没有办法在'createTextNod'中插入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 代码的以下部分非常糟糕:

$.each(JSON.parse(results), function(i, field){
            for(var i = 1; i < JSON.parse(results).length; i++) {...

$.each() 遍历 JSON 中的每个 field，这没问题。 但是您使用了另一个循环，这是完全没有必要的，因为$.each() 和for 循环都遍历数组.这些循环中的每一个都在每次迭代时调用 JSON.parse()。尽管无论这有多糟糕，除非您处理大量数据，否则您可能永远不会注意到任何延迟。

引用资料

以下是所用内容的链接:

Template Literals

.insertAdjacentHTML()

演示

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>`);
});

#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
}

<ul id='users'></ul>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>