title: Append a foreignObject to a SVG in Javascript
body: <p>I've an SVG element with id "graphe". I want to append to this element a foreignObject which contains a paragraph. I read that it is necessary to have a "body" in this object (it's true ?). In all cases, this piece of code doesn't work :</p>
  
  <pre><code>foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
  foreign.setAttributeNS('http://www.w3.org/2000/svg', 'x', 250);
  foreign.setAttributeNS('http://www.w3.org/2000/svg', 'y', 100);
  foreign.setAttributeNS('http://www.w3.org/2000/svg', 'width', 500);
  foreign.setAttributeNS('http://www.w3.org/2000/svg', 'height', 150);
  
  body = document.createElement("body");
  body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  
  texte = document.createElement("p");
  texte.textContent = "EXAMPLE";
  
  foreign.appendChild(body);
  body.appendChild(texte);
  document.getElementById("graphe").appendChild(foreign);
  </code></pre>
  
  <p>And I don't see why. When I open the DOM Inspector in Chrome, I can see that all is here. But nothing is displayed. When I recopy DOM Inspector's code of my objects directly in the source, I see my objects on the page.</p>
  
  <p>[edit] JSFiddle Demo : <a href="http://jsfiddle.net/uwZja/" rel="nofollow">http://jsfiddle.net/uwZja/</a></p>