title: Loading Named Element from Another Webpage
body: <p>I've been struggling to find a solution to this for a few days now. There's even another Stackoverflow page which sounds like almost exactly what I need, but I cannot get the solution there to work: <a href="https://stackoverflow.com/questions/2828109/show-div-from-another-website">Show div from another website</a></p>
  
  <p>The short version is that I have a page (/reference.html) that has many named Div elements (div id="Red", div id="Blue", etc). I would like to be able to call them in other pages on my website (/content1.html, /content2.html), potentially more than one on a page.</p>
  
  <p>It could be user error of some kind, but every solution I've attempted, including the jQuery option in the linked question, has resulted in blanks. </p>
  
  <p>Thank you for any help in pointing out common mistakes to check for, or alternate solutions.</p>
  
  <p>Edit: Adding more details. I've tried several other things that just felt foolish in comparison, so I won't include the 'obviously wrong' category. What I've tried that seems like it should work (but hasn't yet) is below:</p>
  
  <p>References.html</p>
  
  <pre><code>&lt;div id="Red"&gt;Red content.&lt;/div&gt;
  &lt;div id="Blue"&gt;Blue content.&lt;/div&gt;
  &lt;div id="Green"&gt;Green content.&lt;/div&gt;
  </code></pre>
  
  <p>Content1.html</p>
  
  <pre><code>$('#insertHere').load('/References.html #Red');
  
  &lt;div id="insertHere"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Content2.html</p>
  
  <pre><code>$('#insertA').load('/References.html #Blue');
  $('#insertB').load('/References.html #Green');
  
  &lt;div id="insertA"&gt;&lt;/div&gt;
  &lt;div id="insertB"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Edit again: The references page has some formatted cards in each div. I'd like to be able to pull an individual card from the page, without having to make a page for each card or constantly copy-paste the entire code for the card.</p>