It is not possible to "append an image to another." In HTML, it is invalid to place another element inside an <img> tag as the <img> tag cannot have children or a closing tag.
If you want to layer one image on top of another, you can replace the original image with a div of the same size and include both images inside it. By absolutely positioning the second image over the first one, you can achieve this effect. Below is a modified version of your function that demonstrates how to do this:
function overlayImage(element, src, alt) {
var
div = document.createElement('div'),
img = new Image();
element.parentElement.insertBefore(div, element); // add the div to the parent
div.style.display = 'inline-block'; // make it behave like an image
div.style.position = 'relative'; // for absolute position of children
div.appendChild(element);
img.src = src;
img.alt = alt;
img.style.position = 'absolute';
img.style.right = 0;
img.style.top = 0;
div.appendChild(img);
}
Here is a solution for achieving the desired result!
Instead of just using a single <img src="(base)"> tag, this approach replaces it with the following structure.
<div style="display:inline-block; position:relative;">
<img src="(base)">
<img src="(overlay)" style="position:absolute; top:0; right:0;">
</div>
If you have control over the page, it would be beneficial to create a CSS style that can be applied universally instead of manually adjusting each element. Additionally, if you need to apply this technique to numerous images, consider pre-creating the structure mentioned above rather than dynamically modifying it with JavaScript post-page load.