title: Replace a DOM element with an evaluated String of HTML
body: <p>I made a quick "svg-include" service that simply replaces elements on the DOM that have a given attribute with some svg. However, I hit a road block when I tried to do the replace. </p>
  
  <p>In order to use<code>element.replace()</code>, each node must be of type <code>node</code>. How do I evaluate my SVG string so that I may replace an element with it?</p>
  
  <p>Here's a snippet:</p>
  
  <pre><code>//Do eval here so that svg is Node not String
  svg = SvgIncludeSevice.paths[i].svg;
  //svg.className = results[j].className;
  results[j].parentNode.replaceChild(svg, results[j]);
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/WebWanderer/L464skmf/" rel="nofollow noreferrer">And here's my JSFiddle!</a></strong></p>
  
  <p>Thanks everybody!</p>
  
  <p><strong>BY THE WAY!</strong></p>
  
  <p>I will not be accepting answers stating to use JQuery of Prototype or anything else. I wish to use only native calls.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried to use <a href="https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro?rq=1">this sloppy method I found</a> to convert my string to manageable HTML, but it still didn't work! It silently failed...</p>
  
  <p>This is what I changed:</p>
  
  <pre><code>hiddenDiv.innerHTML = SvgIncludeSevice.paths[i].svg;
  svg = hiddenDiv.firstElementChild;
  
  if(svg)
  {
      svg.className = results[j].className;
      results[j].parentNode.replaceChild(svg, results[j]);
  }
  </code></pre>
  
  <p>Oddly, it does evaluate my SVG and allow me to do the replace, which is awesome! Yet, the replace doesn't quite work. Look at these examples:</p>
  
  <p>So, I do get a handle to my evaluated SVG node:</p>
  
  <p><img src="https://i.stack.imgur.com/q7o6S.png" alt="SVG converts to node"></p>
  
  <p>Yet after the replace occurs:</p>
  
  <p><img src="https://i.stack.imgur.com/35iqX.png" alt="SVGNode Fails to add to the DOM properly. Side-by-side with similar checkmark image."></p>
  
  <p>Obviously that didn't work...</p>
  
  <p>Plus, I had to copy this out of my JSFiddle to test it. I didn't change the code at all, it just didn't work in JSFiddle for some reason... :(</p>