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

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

这是一个小提琴