javascript - Vanilla 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

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

我希望这会有所帮助。