Vanilla JavaScript替换元素

问题描述 投票:0回答:2

我环顾四周,似乎找不到使用vanilla JavaScript(而不是jQuery)直接用HTML字符串替换元素的解决方案。

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

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

TL; DR:我可以使用vanilla JavaScript直接替换元素(IMG到SVG)而无需创建父节点吗?

javascript html image svg replacewith
2个回答
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);

我希望这有帮助。


0
投票

假设您已经将SVG加载到字符串中(通过XmlHttpRequestfetch等)。然后你可以使用DOMParser解析它。

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

见:Parse SVG and add it to a svg element

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

© www.soinside.com 2019 - 2024. All rights reserved.