![](/img/trans.png)
[英]How to add a <svg> and subsequently a <polygon> element including attributes in HTML with javascript using the brower's DOM?
[英]How to add svg in html, using JavaScript DOM?
我想通过DOM操作添加svg图像,而不是在HTML DIV中添加它们?
我已经通过谷歌搜索尝试了所有方法,但是找不到更好的解决方案。 我想将svg图像(assets / close.svg)插入span元素内,而不是'X'。 在“ studentDetails”部门中。 将感谢您的帮助。
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替换为图片标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.