用一个经过计算的HTML字符串替换一个DOM元素

Question

我做了一个名为 "svg-include" 的快速服务，它会简单地将具有给定属性的 DOM 元素替换为某些 svg。但是，当我尝试进行替换时，我遇到了一些问题。

为了使用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]);

这是我的JSFiddle链接！

谢谢大家！

顺便说一句！

我不会接受任何使用JQuery或Prototype等其他东西的答案。我只想使用本地调用。

更新

我尝试使用我找到的这种粗糙的方法将字符串转换为可管理的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中不起作用... :(

- WebWanderer

---

"results" 是 "querySelectorAll" 或 "Node List" 的返回结果。 - WebWanderer

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;    

                }
            }
        }

- Andrew Walters