我想通过DOM操作来添加的,而不是在HTML DIV加入他们SVG图像,?
我已经尝试过谷歌上搜索一切,但couldnot为它找到任何更好的解决方案。相反,“X”的我要插入的跨度元素中的SVG图像(资产/ close.svg)。这是“studentDetails” DIV内部。将您的帮助表示感谢。
HTML:
<div id="studentDetails" class="hidden"></div>
JavaScript的:
var studentDetails = document.getElementById('studentDetails');
var favouriteStudent =
contacts[parseInt(e.currentTarget.id)].favourite ? 'favourite' : '';
studentDetails.innerHTML =
"<span id='close-details'>x</span>" +
"<span id='favourite' class='" +
favouriteStudent +
"'>*</span>" +
'<div>' +
contacts[parseInt(e.currentTarget.id)].name +
'</div>' +
'<div>' +
contacts[parseInt(e.currentTarget.id)].email +
'</div>';
studentDetails.setAttribute('class', 'hidden');
CSS:
#close-details {
display: block;
float: right;
font-size: 20px;
margin-top: -8px;
background-image: url('assets/close.svg');
background-repeat: no-repeat;
background-position: right;
}
这可能帮助,你可以使用IMG标记只需添加SVG:
var studentDetails = document.getElementById('studentDetails');
var favouriteStudent =
contacts[parseInt(e.currentTarget.id)].favourite ? 'favourite' : '';
studentDetails.innerHTML =
"<span id='close-details'><img src='assets/close.svg'></span>" +
"<span id='favourite' class='" +
favouriteStudent +
"'>*</span>" +
'<div>' +
contacts[parseInt(e.currentTarget.id)].name +
'</div>' +
'<div>' +
contacts[parseInt(e.currentTarget.id)].email +
'</div>';
我已经在第5行做了编辑,你看我换成X与图像标签..