如何将 SVG 添加到我的 Javascript.textContent？

Question

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.';

Answer 1

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>