Replace the DOM element with the evaluated HTML string

Question

I made a quick svg-include service that simply replaces elements in the DOM that have this attribute with some svg. However, I hit the road block when I tried to replace.

To use element.replace(), each node must have a type node. How do I evaluate an SVG string so that I can replace it?

Here is a snippet:

//Do eval here so that svg is Node not String
svg = SvgIncludeSevice.paths[i].svg;
//svg.className = results[j].className;
results[j].parentNode.replaceChild(svg, results[j]);

And here is my JSFiddle!

Thanks everyone!

ON A WAY!

I will not accept answers saying to use jQuery Prototype or something else. I want to use my own calls only.

UPDATE

I tried using this messy method that I found to convert my string to managed HTML, but it still didn't work! He was silent...

This is what I changed:

hiddenDiv.innerHTML = SvgIncludeSevice.paths[i].svg;
svg = hiddenDiv.firstElementChild;

if(svg)
{
    svg.className = results[j].className;
    results[j].parentNode.replaceChild(svg, results[j]);
}

, SVG , ! , . :

, SVG node:

:

, ...

, JSFiddle, . , JSFiddle - ...: (

Answer 1

, - SVG.

W3C : http://validator.w3.org/

.svg .

, svg.

https://jsfiddle.net/L464skmf/15/

apply: function()
    {
        var results;
        var svg;
        for(var i = 0; i < SvgIncludeSevice.paths.length; i++)
        {
            results = document.querySelectorAll(SvgIncludeSevice.paths[i].querySelector);

            if(results)
            {
                for(var j = 0; j < results.length; j++)
                {
                    //Do eval here so that svg is Node not String
                    svg = SvgIncludeSevice.paths[i].svg;
                    //svg.className = results[j].className;

var twocircles = '<svg><circle cx="20" cy="20" r="10" stroke="black" stroke-width="2" fill="red"></circle> <circle cx="50" cy="20" r="10" stroke="black" stroke-width="2" fill="green"></circle></svg>'

// Create a dummy receptacle
var receptacle = document.createElement('div');

// Add all svg to the receptacle
receptacle.innerHTML = '' + twocircles;

          results[j].innerHTML =       receptacle.innerHTML;    

                }
            }
        }