如何将 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://Whosebug.design/assets/img/logos/sf/sf-icon.svg" /> You need to enter an e-mail address.';

emailError[1].textContent = '<img src="https://Whosebug.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>

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

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

javascript

html

css

web

web-deployment