title: Appending SVG object using JavaScript
body: <p>I'm new to Javasscript and SVG and can successfully generate an inline SVG object and change attributes.</p>
  
  <p>I've also tried cutting and pasting code to add an SVG object dynamically with no luck. Here's the code I've tried...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function setColor(color)
  {
  document.getElementById("rect").style.fill = color;
  document.getElementById("rect").setAttribute("height",100);
  document.getElementById("line").style.stroke = color;
  document.getElementById("myLine").style.stroke = "blue";
  }
      var myrect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      myrect.setAttribute("id", "myrect"); 
      myrect.setAttribute("fill","red");
      myrect.setAttribute("stroke","black");
      myrect.setAttribute("stroke-width","5");
      myrect.setAttribute("x", "100");
      myrect.setAttribute("y", "100");
      myrect.setAttribute("width", "300");
      myrect.setAttribute("height", "300");
      svg.appendChild(myrect);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px"&gt;
  &lt;rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" /&gt;
  
  &lt;line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/&gt;
  
  &lt;line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/&gt;
  
  &lt;/svg&gt;
  
  &lt;button onclick="setColor('red');"&gt;Red&lt;/button&gt;
  &lt;button onclick="setColor('green');"&gt;Green&lt;/button&gt;
  &lt;button onclick="setColor('blue');"&gt;Blue&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>