[js] Замена html элементов на странице

Допустим, в контенте странице content-page нужно заменить все вставленные изображения с классом img-replace на обертку с ссылкой для fancybox и контентом с figure и figcaption.

<div class="content-page">
    <img src="https://test.ru/img-1.jpg" alt="alt-text" title="title text" class="img-replace">
    <img src="https://test.ru/img-2.jpg" alt="alt-text" title="title text" class="img-replace">
    <img src="https://test.ru/img-3.jpg" alt="alt-text" title="title text" class="img-replace">
</div>

Сделать это через js можно следующим образом:

document.querySelectorAll(".content-page img.img-replace").forEach(img => {
    const imgSrc = img.getAttribute("src");
    const imgTitle = img.getAttribute("title");
    const imageWrapper = document.createElement("a");

    imageWrapper.classList.add("new-class");
    imageWrapper.dataset.fancybox = "";
    imageWrapper.href = imgSrc;
    imageWrapper.innerHTML = `
    <figure>
        <img src="${imgSrc}" title="${imgSrc}" class="class-image">
        <figcaption>${imgTitle}</figcaption>
    </figure>
    `;

    img.replaceWith(imageWrapper);
});