[FIXED] How Do I Add an SVG to My Javascript .textContent?

Issue

I am simply trying to insert an exclamation SVG here, but I can't seem to do it, and I am unable to find an adequate answer on Google.

The SVG is downloaded, and contained within my project folder.

if(email.validity.valueMissing) {
        emailError.textContent = '(SVG Here) You need to enter an e-mail address.';

Solution

Assuming e-mailError is a display element in your html (span, p, div etc.) the icon and associated text can be loaded by setting the .innerHTML property of the element.

The use of .textContent will result in the markup text being displayed rather than the intended layout (as you have found)

This working snippet demonstrates the difference.

const emailError=document.getElementsByClassName("emailError");

emailError[0].innerHTML = '<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> You need to enter an e-mail address.';

emailError[1].textContent = '<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> You need to enter an e-mail address.';

img {
width: 40px;
aspect-ratio: 1;
}

span {
border: 1px solid black;
display: flex;
align-items: center;
}

<p>Example loaded using .innerHTML:</p>
<p><span class="emailError"></span></p>

<p>Example loaded using .textContent:</p>
<p><span class="emailError"></span></p>

Answered By - Dave Pritlove

Answer Checked By - Timothy Miller (PHPFixing Admin)