檢查，如果沒有，將其插入

Question

說我有以下的HTML：

<div id="list"> 
    <span id="one">toto</span> 
    <span id="two">titi</span> 
</div> 

，不管怎樣，我已經檢索的JSON IDS + 內容其列表如下：

var retrievedList = [ 
{ 
"id" : "one", 
"content" : "toto" 
}, 
{"id" : "two", 
"content" : "titi" 
}, 
{ 
"id" : "three", 
"content" : "tutu" 
}]; 

通知所述第三元件是尚未在DOM。

我想使用JS/JQuery來檢查檢索列表中是否存在不在DOM/HTML中的元素，如果是這種情況，請將相應的跨度插入到DOM/Html中。

在JQuery中實現這一點的最佳方法是什麼？

Answer 1

$.each(retrievedList, function(i, v) { 
    if(!$('#' + v.id).length) { 
     $('<span />').prop('id', v.id).text(v.content).appendTo('#list'); 
    } 
}); 

Here's a fiddle