title: Check if element exists in the DOM, and if not, insert it
body: <p>Say I have the following html:</p>
  
  <pre><code>&lt;div id="list"&gt;
      &lt;span id="one"&gt;toto&lt;/span&gt; 
      &lt;span id="two"&gt;titi&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and somehow, I have retrieved a list of <strong>ids</strong> + <strong>contents</strong> in json which is as follows:</p>
  
  <pre><code>var retrievedList = [
  {
  "id" : "one",
  "content" : "toto"
  },
  {"id" : "two",
   "content" : "titi"
  },
  {
  "id" : "three",
  "content" : "tutu"
  }];
  </code></pre>
  
  <p>Notice the <strong>third element</strong> is not yet in the DOM.</p>
  
  <p><strong>I want to use JS/JQuery in order to check if there exists an element in the retrieved list that is not in the DOM/HTML and if that is the case, insert a corresponding span into the DOM/Html.</strong></p>
  
  <p>What is the best way to achieve this in JQuery?</p>