如何在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，而不是插入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);
    }
}

如果您想簡化它，我建議#ulUsers添加到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);
}