如何将 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>