title: SVG node not appending child element
body: <p>I'm attempting to write a little script to wrap each path element of a <a href="http://jvectormap.com/" rel="nofollow">jVectorMap</a> in an anchor so as to make it keyboard accessible and simplify some event handling I'd have to do otherwise. I'd ordinarily just try to edit the program code, but I can't really make heads or tails of the unminified production code and I'm not feeling patient enough to work from the twenty-odd source files.</p>
  
  <p>I'm running into a little problem with anchor elements not having children added when appendChild is called.</p>
  
  <p>There might be a better way to do this - in fact, I'm nearly sure there is - than wrapping every element of the array in an anchor and then tossing it up into an array, devouring the element and then replacing them from the array when they're all gone, but there aren't any coming to me at the moment, and this is more of a proof of concept than production code. (I'm not a good programmer by any means, and if a better way of doing this is easily apparent to you, I'd love to hear it.)</p>
  
  <p>So I've logged pretty much every step of the process, from the nodes to the anchored nodes, and while the nodes are appearing in the console, and the anchored nodes are too, the anchored nodes are not appending the node contents to themselves. So I'm just getting a bunch of links, with no content.</p>
  
  <p>This is the code I have thus far.</p>
  
  <pre><code>$(document).ready( function() {
      $('#map').vectorMap({map: 'us_aea_en'});
  
      var map = document.getElementById("map");
      var container = map.firstChild;
      var svg = container.firstChild;
      var pathGroup = svg.firstChild;
  
      var nodeArray = [];
  
      var xlinkNS = "http://www.w3.org/1999/xlink";
      var svgNS = "http://www.w3.org/2000/svg";
  
      while (pathGroup.firstChild) {
          var node = pathGroup.firstChild;
          var anchoredNode = document.createElementNS(svgNS, "a");
          anchoredNode.setAttributeNS(xlinkNS,"xlink:href","dev.sbcindustry.com/membership/"+node.getAttribute("data-code").slice(3));
          anchoredNode.appendChild(node);
          console.log(anchoredNode);
          nodeArray.push(anchoredNode);
          node.parentNode.removeChild(node);
      }
  
      for (i=0; i &lt; nodeArray.length; i++) {
          pathGroup.appendChild(nodeArray[i]);
      }
  
  });
  </code></pre>
  
  <p>It's very possible I'm making some stupid error, as most of my work with SVG has been with various libraries, but since I'm already loading 130+ kb of files just to make the map (which is, granted, less than the really poorly-optimised image + image map we were using before), I'd rather not throw Raphael or svg.js or snap in the mix.</p>