Vanilla JavaScript replace element

Question

I've looked around and can't seem to find a solution to directly replacing an element with a HTML string using vanilla JavaScript (not jQuery).

I'm storing a bunch of svg's in a directory that's publicly accessible, and I want to be able to include them in my files via the image tag <img src="path/to/svgs/example.svg">. However, this comes with its drawbacks as they can't be coloured/styled when they're pulled in as an image (to my knowledgE).

I discovered this example jQuery Image to SVG but obviously this uses jQuery's replaceWith function. I'm trying to replicate the functionality but struggling with the aforementioned function. All examples I've found end up creating a parent div element, and appending the new HTML to that newly created element.

TL;DR: Can I directly replace an element (IMG to SVG) using vanilla JavaScript without creating parent nodes?

Could you show us an example of code that you currently have and an example of desired result? Something like [mcve] — Calvin Nunes, Aug 28 '18 at 16:41
It's worth noting that jQuery [does this by creating a temporary parent node](https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/src/manipulation/buildFragment.js#L41); what's the reason for your prohibition against doing the same? — Jordan Running, Aug 28 '18 at 16:47
Are you willing to use `` instead of an `` tag? Would something like [this answer](https://stackoverflow.com/a/51664058/179125) work for you? — Jordan Running, Aug 28 '18 at 18:44

Senad Meškin · Answer 1 · 2018-08-29T14:06:19.517

jQuery is also using JavaScript behind replaceWith method, so if you want to replace one element with another you need to do next steps:

Create new element
Add it after/before an element that needs to be replaced
Then remove original element

e.g If we have HTML list

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

and we want to replace list item, with id "my-element", with the new element then we need to do next:

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

I hope this helps.

score 0 · Answer 2 · answered Aug 29 '18 at 14:39

Assuming you have already loaded the SVG into a string (via XmlHttpRequest, fetch etc). Then you can parse it using the DOMParser.

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

See: Parse SVG and add it to a svg element

Then you can replace the original <img> using something like the insertBefore/removeChild method that Senad suggests.

Vanilla JavaScript replace element

2 Answers2