Replace a DOM element with an evaluated String of HTML

Question

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

In order to use element.replace() , each node must be of type node . How do I evaluate my SVG string so that I may replace an element with it?

Here's 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's my JSFiddle!

Thanks everybody!

BY THE WAY!

I will not be accepting answers stating to use JQuery of Prototype or anything else. I wish to use only native calls.

UPDATE

I tried to use this sloppy method I found to convert my string to manageable HTML, but it still didn't work! It silently failed...

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]);
}

Oddly, it does evaluate my SVG and allow me to do the replace, which is awesome! Yet, the replace doesn't quite work. Look at these examples:

So, I do get a handle to my evaluated SVG node:

Yet after the replace occurs:

Obviously that didn't work...

Plus, I had to copy this out of my JSFiddle to test it. I didn't change the code at all, it just didn't work in JSFiddle for some reason... :(

Answer 1

I think the issue in this case is the SVG string being injected.

It doesn't validate in the W3C tool: http://validator.w3.org/

And saving the string as a .svg file doesn't render either when opened in the browser.

Using a simple example I haven't had trouble inserting an svg string.

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;    

                }
            }
        }