How to replace `HTMLElement`s using `exchangeChild()`

[skizzo]

Hi,

given a HTML string, I need to replace all occurences of <figure> ...

<figure><img src="https://my.image.url" /><figcaption>Some image description</figcaption></figure>

... with an actual <img>:

<img src="https://my.image.url" alt="Some image description"/>

I honestly have no idea how to do this, the docs are not very useful for anything beyond fetching HTML tags and their attributes. Would be really useful to have a working example of how to use e.g. the exchangeChild() function.

Thank you for any hints!

[taoqf]

You can replace img like this:

const html = `<figure><img src="https://my.image.url" /><figcaption>Some image description</figcaption></figure>`;
const root = parse(html);
const divs = root.querySelectorAll('figure');
for (const div of divs) {
    const img = div.querySelector('img');
    img.replaceWith(parse('<img src="https://my.image.url" alt="Some image description"/>'));
}