香草JavaScript替换元素

时间:2018-08-28 16:38:29

标签: javascript html image svg replacewith

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

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

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

TL; DR:是否可以使用原始JavaScript直接替换元素(从IMG到SVG)而不创建父节点?

2 个答案:

答案 0 :(得分: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);

我希望这会有所帮助。

答案 1 :(得分: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