SVG+Javascript: Create new element

[ATC]

How to generate a new SVG element such as circle, rect, line etc. using Javascript?

[ATC]

  // Create a new rectangle element
  popup = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  // Set any attributes as desired
  popup.setAttribute("x", posx);
  popup.setAttribute("y", posy);
  popup.setAttribute("width",  100);
  popup.setAttribute("height",  200);
  popup.setAttribute("class", "popup");
  popup.setAttribute("onmouseup", "popup_mouseup(evt);");
  popup.setAttribute("onmouseout", "popup_mouseout(evt);");

  // Add to a parent node; document.documentElement should be the root svg element.
  // Acquiring a parent element with document.getElementById() would be safest.
  document.documentElement.appendChild(popup);