香草 JavaScript 替换元素

Question

我环顾四周，似乎找不到使用原生 JavaScript（不是 jQuery）直接用 HTML 字符串替换元素的解决方案。

我将一堆 svg 存储在一个可公开访问的目录中，我希望能够通过图像标签 <img src="path/to/svgs/example.svg"> 将它们包含在我的文件中。然而，这有它的缺点，因为当它们作为图像被拉入时（据我所知），它们不能被着色/样式化。

我发现了这个例子jQuery Image to SVG，但显然这使用了jQuery的replaceWith函数。我正在尝试复制该功能，但在上述功能上苦苦挣扎。我发现的所有示例最终都创建了一个父 div 元素，并将新的 HTML 附加到该新创建的元素。

TL;DR：我可以使用原生 JavaScript 直接替换元素（IMG 到 SVG）而不创建父节点吗？

Answer 1

假设您已经将 SVG 加载到字符串中（通过XmlHttpRequest、fetch 等）。然后你可以使用DOMParser解析它。

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml");

见：Parse SVG and add it to a svg element

然后您可以使用 Senad 建议的 insertBefore/removeChild 方法替换原来的 <img>。

Answer 2

jQuery 也在 replaceWith 方法后面使用 JavaScript，所以如果你想用另一个元素替换一个元素，你需要执行以下步骤：

1. 创建新元素
2. 在需要替换的元素之后/之前添加它
3. 然后删除原始元素

例如 如果我们有 HTML 列表

<ul>
        <li>before</li>
        <li id="my-element">My element</li>
        <li>after</li>
    </ul>

我们想用新元素替换id为“my-element”的列表项，那么我们需要下一步：

//get reference to element that we want to replace
var elementToReplace = document.getElementById('my-element');
//create new element which will replace existing element
var newLi = document.createElement('li');
//just setting html in it
newLi.innerHTML = 'Just added';
//getting parent element reference and executing method "insertBefore" passing our new element and reference of element that we want to replace
elementToReplace.parentNode.insertBefore(newLi, elementToReplace.nextSibling);
//then we remove original element
elementToReplace.parentNode.removeChild(elementToReplace);

我希望这会有所帮助。