title: Inject inline svg into div tag with javascript
body: <p>I'm working with an ecommerce platform and cannot install d3 or other svg libraries. For security reasons, the site won't let me manipulate iframes that have "external sources"—apparently, all iframes are external, but whatever. </p>
  
  <p>So what I have resorted to is trying to inject an svg into a div tag. not sure why my code won't work. Do I need to append an svg  or something fancy? It's supposed to change the circle to red when pressed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=inlinetest&gt;
    &lt;svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="100mm"
       height="100mm"
       viewBox="0 0 744.09448819 1052.3622047"
       id="svg2"
       version="1.1"
       inkscape:version="0.91 r13725"
       sodipodi:docname="drawing-2.svg"&gt;
      &lt;defs
         id="defs4" /&gt;
      &lt;sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="0.7"
         inkscape:cx="110.88456"
         inkscape:cy="710.05401"
         inkscape:document-units="px"
         inkscape:current-layer="layer1"
         showgrid="false"
         inkscape:window-width="250"
         inkscape:window-height="250"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1" /&gt;
      &lt;metadata
         id="metadata7"&gt;
        &lt;rdf:RDF&gt;
          &lt;cc:Work
             rdf:about=""&gt;
            &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
            &lt;dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
            &lt;dc:title&gt;&lt;/dc:title&gt;
          &lt;/cc:Work&gt;
        &lt;/rdf:RDF&gt;
      &lt;/metadata&gt;
      &lt;g
         inkscape:label="Layer 1"
         inkscape:groupmode="layer"
         id="layer1"&gt;
        &lt;circle
           style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
           id="path3336"
           cx="131.42857"
           cy="129.50507"
           r="131.42857" /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;button onclick="myFunction()"&gt;Click me&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;script&gt;
  function myFunction() {
  document.getElementById('inlinetest').innerHTML = "&lt;svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="100mm"
     height="100mm"
     viewBox="0 0 744.09448819 1052.3622047"
     id="svg2"
     version="1.1"
     inkscape:version="0.91 r13725"
     sodipodi:docname="drawing-2.svg"&gt;
    &lt;defs
       id="defs4" /&gt;
    &lt;sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="0.7"
       inkscape:cx="110.88456"
       inkscape:cy="710.05401"
       inkscape:document-units="px"
       inkscape:current-layer="layer1"
       showgrid="false"
       inkscape:window-width="250"
       inkscape:window-height="250"
       inkscape:window-x="-8"
       inkscape:window-y="-8"
       inkscape:window-maximized="1" /&gt;
    &lt;metadata
       id="metadata7"&gt;
      &lt;rdf:RDF&gt;
        &lt;cc:Work
           rdf:about=""&gt;
          &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
          &lt;dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
          &lt;dc:title&gt;&lt;/dc:title&gt;
        &lt;/cc:Work&gt;
      &lt;/rdf:RDF&gt;
    &lt;/metadata&gt;
    &lt;g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1"&gt;
      &lt;circle
         style="fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
         id="path3336"
         cx="131.42857"
         cy="129.50507"
         r="131.42857" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;";
  }
  
  &lt;/script&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>