How Do I Use Javascript To Insert An Svg Use Element Into An Svg Group?

I have an svg file containing a group with a single line element. I can make use of the use element and make several reference copies in any position I want them. However, I want

Solution 1:

var  svgns = "http://www.w3.org/2000/svg";
var  xlinkns = "http://www.w3.org/1999/xlink";

// Get a reference to the <g> element    
var  g = document.getElementById("ledgerlines");

// Create a <use> element
var  use = document.createElementNS(svgns, "use");
// Add an 'href' attribute (using the "xlink" namespace)
use.setAttributeNS(xlinkns, "href", "#MidCLine1");
// Offset the line down by 10
use.setAttribute("y", "10");  // offset = y+10

// Add the <use> to the <g>
g.appendChild(use);

Demo here