Javascript把图像放在一个范围内

Question

我的代码应该将图像放在<span>中：

document.getElementById("f_name_mark").innerText = "<img src='images/icons/tick.png' class='mark'>";

但是，输出为<img src='images/icons/tick.png' class='mark'>作为文本字符串。

您是否无法将图片放入<span>？

Answer 1

使用InnerHTML代替innerText

Innerhtml and Innertext properties

与InnerText不同，InnerHtml允许您使用HTML富文本，并且不会自动编码和解码文本。换句话说，InnerText检索标签的内容并将其设置为纯文本，而InnerHtml以HTML格式检索和设置相同的内容

Span是内联元素，image是块元素，你可以设置span元素的显示来阻止或使用div来处理它。

document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";

Answer 2

innerHTML是有原因的:)尝试

document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";

Answer 3

请勿使用innerHTML或innerText。相反，创建img元素，设置属性并将它们附加到跨度。

var img = document.createElement('IMG');

img.setAttribute('src', 'images/icons/tick.png');
img.setAttribute('class', 'mark');

document.getElementById("f_name_mark").appendChild(img);

Answer 4

document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";

Answer 5

使用innerHTML属性，而不是innerText。它将被解析并显示为HTML，而innerText将仅显示为文本。