javascript - 如何使用 JavaScript DOM 在 html 中添加 svg?
问题描述
我想通过 DOM 操作添加 svg 图像,而不是在 HTML DIV 中添加它们?
我已经通过谷歌搜索尝试了所有方法,但找不到更好的解决方案。我想在 span 元素中插入 svg 图像(assets/close.svg)而不是“X”。这是在'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 替换为图像标签..
推荐阅读
- python - 最新错误 = AttributeError: 'str' 对象没有属性 'write'
- excel - 如何在一个“子”功能中跨多个工作表执行操作
- javascript - 调用函数以在 Vanilla JavaScript 中播放音频文件时如何更改可变音频文件值?
- python - 如何遍历网站上的 .txt 文件链接、抓取并存储在一个可延展的 csv/excel 文件中
- javascript - 将新数据从 Node REST API 推送到 React-Native
- reactjs - 我如何在组件内使用 Enzyme+Mocha 方法调用进行测试
- google-cloud-platform - 如何在 Google Data Studio 中查看示例社区可视化的代码?
- tableau-api - Tableau Server 用户如何更改粒度表上的轴视图?
- python - Dynamo 中的粒子系统/运动,使用 Python 脚本
- java - 在 sendgrid API 中实现“/messages”端点时出现授权异常