Failed to execute 'appendChild' on 'Node': Only one element on document allowed
<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>