用评估的HTML字符串替换DOM元素

Question

我做了一个快速的“svg-include”服务，它简单地用DOM替换具有某个svg的给定属性的DOM。但是，当我尝试更换时，我碰到了路障。

要使用element.replace()，每个节点必须是node类型。如何评估我的SVG字符串，以便用它替换元素？

这是一个片段：

//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!

谢谢大家！

按方式行事！

我不会接受说明使用原型JQuery或其他任何东西的答案。我希望只使用原生电话。

更新

我尝试使用this sloppy method I found将我的字符串转换为可管理的HTML，但它仍然无效！它默默地失败了......

这是我改变的：

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节点的句柄：

在更换发生后：

显然这不起作用......

另外，我必须将其从我的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;    

                }
            }
        }