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

Question

我只是想在這里插入感嘆號 SVG，但我似乎做不到，而且我無法在 Google 上找到合適的答案。

SVG 已下載，並包含在我的項目文件夾中。

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

Answer 1

假設e-mailError是 html 中的顯示元素（span、p、div 等），可以通過設置元素的.innerHTML屬性來加載圖標和相關文本。

使用.textContent將導致顯示標記文本而不是預期的布局（如您所見）

這個工作片段展示了差異。

 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>