title: Dynamically insert foreignObject into svg with jquery
body: <p>Given this html+svg</p>
  
  <pre><code>&lt;div id="svg" style="width: 300px; height: 300px"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg"  width="300" height="300"&gt;
          &lt;svg x='10' y='10' id='group'&gt;
             &lt;rect id="rect" x='0' y='0' width='100' height='100'  fill='#f0f0f0'/&gt;
          &lt;/svg&gt;
          &lt;svg x='100' y='100' id='group2'&gt;
             &lt;rect id="rect2" x='0' y='0' width='100' height='100' fill='#f00000'/&gt;
             &lt;foreignobject x='0' y='0' width='100' height='100' &gt;
                  &lt;body&gt;
                      &lt;div&gt;manual&lt;/div&gt;
                  &lt;/body&gt;
             &lt;/foreignobject&gt;
          &lt;/svg&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to insert a foreignObject into #group (preferably with jquery for it makes manipulation simpler). I've tried(code is sketchy from head)</p>
  
  <pre><code>$("#group").append("&lt;foreignobject x='0' y='0' width='100' height='100'&gt;&lt;body&gt;&lt;div&gt;auto&lt;/div&gt;&lt;/body&gt;&lt;/foreignobject&gt;") 
  </code></pre>
  
  <p>to no avail probably because "body" gets stripped. I've tried several exotic ways of creating the body element and the best I could - firebug doesn't grey out the inserted foreignObject element anymore but it's still not visible.</p>
  
  <p>So either I'm not seeing something obvious or there's a strange way to do that.</p>
  
  <p>Ideas?</p>
  
  <p><strong>Update with final solution</strong>
  This is the shortest of what I came up with</p>
  
  <pre><code>var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject' );
  var body = document.createElement( 'body' ); // you cannot create bodies with .apend("&lt;body /&gt;") for some reason
  $(foreignObject).attr("x", 0).attr("y", 0).attr("width", 100).attr("height", 100).append(body);
  $(body).append("&lt;div&gt;real auto&lt;/div&gt;");
  $("#group").append(foreignObject);
  </code></pre>