title: Appending path child within SVG Using Javascript
body: <p>Good Day,  </p>
  
  <p>I am having incredible difficulty in creating a path and displaying it using "appendChild" within an SVG element.</p>
  
  <p>I have to be missing something critically simple as I have poured over W3C's specs, w3schools.com, various posts here and trying to ninja google in various ways.</p>
  
  <p>I am testing within FireFox and Chrome.  </p>
  
  <p>I have a simple svg file thus:  </p>
  
  <pre><code>&lt;svg xmlns:svg ... id="fullPageID"&gt;
   &lt;image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" /&gt;  
   &lt;image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" /&gt;
   &lt;script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" /&gt;  
  &lt;/svg&gt;
  </code></pre>
  
  <p>The script I am attempting to use looks like:  </p>
  
  <pre><code>newpath = document.createElementNS("SVG","path");  
  newpath.setAttribute("id", "pathIdD");  
  newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
  newpath.setAttribute("stroke", "black");  
  newpath.setAttribute("stroke-width", 3);  
  newpath.setAttribute("opacity", 1);  
  newpath.setAttribute("fill", "none");
  
  document.getElementById("fullPageID").appendChild(newpath);
  </code></pre>
  
  <p>I just want to make something simple work. Am I wrong to think that I don't require a solution as complicated as the one found at <a href="https://stackoverflow.com/questions/4441451/library-to-generate-svg-path-with-javascript">Library to generate SVG Path with Javascript?</a>?</p>
  
  <p>Thanks Kindly.</p>