title: appending entire svg to dom element leads to Exception... "String contains an invalid character" code: "5"
body: <p>I'd like to appending an entire svg element to an childless element of the DOM. I tried the d3-style and the common style and both lead me to this error:</p>
  
  <pre><code>[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (InvalidCharacterError)" location: "&lt;unknown&gt;"]
  </code></pre>
  
  <p>How do I append it correct?</p>
  
  <pre><code>// with d3
  var dropTargetsDiv = d3.select(".droptargets").html("");
  dropTargetsDiv.append(svgPic);
  
  // without d3
  var dropTargetsDiv = window.document.getElementById("canvas").parentNode;
  dropTargetsDiv.innerHTML="";
  dropTargetsDiv.appendChild(window.document.createElement(svgPic));
  
  //the svg content is taken from a text area...
  var svgPic = scope.$parent.export;
  
  //and looks fine
  &lt;svg id="canvas"&gt;&lt;g id="dashboard-content"&gt;&lt;rect id="dropPanel"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;
  
  // the structure
  &lt;div class="droptargets"...
   &lt;svg id="canvas"...
    &lt;g id="dashboard-content...
  </code></pre>