如何在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()。尽管无论这有多糟糕，除非您处理大量数据，否则您可能永远不会注意到任何滞后。

参考文献

以下是与所用内容的链接：

模板文字

.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>

​

Answer 2

createTextNode专门用于创建TextNode，而不是插入TextNode。对于后者，您可以使用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);
}