javascript - 检查 DOM 中是否存在元素，如果不存在，则插入它

Question

假设我有以下 html:

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

不知何故，我检索了 json 中的 ids + contents 列表，如下所示:

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