[英]How to add svg in html, using JavaScript DOM?
I want to add svg image via DOM manipulation, instead of adding them in HTML DIV? 我想通过DOM操作添加svg图像,而不是在HTML DIV中添加它们?
I have tried everything by googling but couldnot find any better solution for it. 我已经通过谷歌搜索尝试了所有方法,但是找不到更好的解决方案。 Instead of 'X' i want to insert the svg image (assets/close.svg) inside the span element. 我想将svg图像(assets / close.svg)插入span元素内,而不是'X'。 which is inside the 'studentDetails' Div. 在“ studentDetails”部门中。 Will be grateful for your help. 将感谢您的帮助。
HTML: HTML:
<div id="studentDetails" class="hidden"></div>
javascript: 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: 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;
}
this might help, as you can simply add svg using IMG tag: 这可能会有所帮助,因为您可以使用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>';
i have made an edit in line 5 as you see i replaced X with the image tag.. 我在第5行进行了编辑,如您所见,我将X替换为图片标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.