I am attempting to generate an SVG element using JavaScript and then append it to the DOM. The SVG element makes reference to a symbol. I have found success using the insertAdjacentHTML method, but I am struggling to achieve the same result with the appendChild method.
Even though all the necessary elements appear to be in the DOM when using appendChild, the rendering is incorrect. Can anyone help me troubleshoot this issue?
http://codepen.io/bradjohnwoods/pen/dGpqMb?editors=101
<svg display="none">
<symbol id="symbol--circle--ripple" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" />
</symbol>
</svg>
<button id="btn">
</button>
<script>
var btn = document.getElementById('btn');
//var myString = '<svg><use xlink:href="#symbol--circle--ripple" width="100" height="100" class="btn--ripple__circle"></use></svg>';
//btn.insertAdjacentHTML('afterbegin', myString);
var svg = document.createElement('svg');
var use = document.createElement('use');
use.setAttribute("xlink:href", "#symbol--circle--ripple");
use.setAttribute("width", "100");
use.setAttribute("height", "100");
use.classList.add("btn--ripple__circle");
svg.appendChild(use);
btn.appendChild(svg);
</script>