title: Failed to execute 'appendChild' on 'Node': Only one element on document allowed
body: <p>I'm trying to load an external svg file and then write additional SVG elements on top of it. When I do, I get the following  error</p>
  <blockquote>
  <p>Failed to execute 'appendChild' on 'Node': Only one element on document allowed</p>
  </blockquote>
  <p>when I inspect within Chrome.</p>
  <p>Here's the HTML:</p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/index.css&quot;&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; id=&quot;mySvg&quot;&gt;
          &lt;circle cx=&quot;40&quot; cy=&quot;30&quot; r=&quot;15&quot; fill=&quot;#FF00FF&quot;
            stroke=&quot;#000000&quot; stroke-width=&quot;2&quot; /&gt;
        &lt;/svg&gt;
        &lt;object data=&quot;img/drawing.svg&quot; type=&quot;image/svg+xml&quot;
          align=&quot;center&quot; id=&quot;svgDrw&quot; height=&quot;80vh&quot;&gt;&lt;/object&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/problem.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here's problem.js:</p>
  <pre><code>var svgXtraDoc;
  var d = document.getElementById(&quot;svgDrw&quot;);
  
  d.addEventListener(&quot;load&quot;,function(){
  
    // get the inner DOM 
    svgXtraDoc = d.contentDocument;
    // get the inner element by id
    svgRect1 = svgXtraDoc.getElementById(&quot;MyRect1&quot;);
    svgRect2 = svgXtraDoc.getElementById(&quot;MyRect2&quot;);
  }, false);
  
  
  function addRect() {
    var svgRect = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, 
      &quot;rect&quot;);
    svgRect.setAttribute(&quot;x&quot;, 100);
    svgRect.setAttribute(&quot;y&quot;, 100);
    svgRect.setAttribute(&quot;width&quot;, 100);
    svgRect.setAttribute(&quot;height&quot;, 100);
    svgRect.style.fill = &quot;red&quot;;
    // mySvg.appendChild(svgRect);
    svgXtraDoc.appendChild(svgRect);
  }
  
  document.getElementById(&quot;mySvg&quot;).addEventListener(&quot;click&quot;, addRect);
  </code></pre>
  <p>... and here's drawing.svg, stripped of some of the Inkscapy cruft:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
  &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt;
  
  &lt;svg
     xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;
     xmlns:cc=&quot;http://creativecommons.org/ns#&quot;
     xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
     xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;
     xmlns=&quot;http://www.w3.org/2000/svg&quot;
     width=&quot;29.02857mm&quot;
     height=&quot;37.092064mm&quot;
     viewBox=&quot;0 0 102.85714 131.42857&quot;
     id=&quot;svg2&quot;
     version=&quot;1.1&quot;&gt;
    &lt;g
       id=&quot;layer1&quot;
       transform=&quot;translate(-205.71428,-218.07649)&quot;&gt;
      &lt;rect
         style=&quot;stroke:none;fill-opacity:1;fill:#5eb056&quot;
         id=&quot;MyRect1&quot;
         width=&quot;102.85714&quot;
         height=&quot;131.42857&quot;
         x=&quot;205.71428&quot;
         y=&quot;218.07649&quot; /&gt;
      &lt;rect
         style=&quot;fill:#000000;stroke:none;fill-opacity:1&quot;
         id=&quot;MyRect2&quot;
         width=&quot;42.857143&quot;
         height=&quot;65.714287&quot;
         x=&quot;231.42857&quot;
         y=&quot;252.3622&quot; /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>The error arises when you click on the circle: the rectangle that should appear within the two-rectangle imported drawing doesn't appear, and the error message &quot;Failed to execute 'appendChild' on 'Node': Only one element on document allowed.&quot; is displayed in the console.</p>
  <p>If I change this so the rectangle is added to the svg containing the circle, i.e. by uncommenting the line &quot;// mySvg.appendChild(svgRect);&quot;, then the rectangle successfully appears.</p>
  <p>I also know that the drawing file is successfully loading, because in other code (not included here for brevity reasons) I can change the colors of the rectangles within that file. So it seems that I can access existing elements within the file but not add elements.</p>
  <p>Is there something about externally loaded SVGs versus inline SVGs that I'm not taking into account?</p>
  <p>One last thing -- this is going into a Cordova app so I'd like to keep it small, so pure JavaScript solutions are preferred. I'll use JQuery or SnapSVG if I have to but it seems my needs are sufficiently simple that it should be possible to do this without external libraries.</p>