在Javascript新div中插入一个HTML图标

Question

在这个Django项目中，有一个Javascript函数创建了一个新的div，我们在其中显示一些数据。

for (var i = 0; i < files.length; i++) {
var newDiv = document.createElement('div');
newDiv.setAttribute("class","files_div");
//Call the helper function to check if it's a PDF
newDiv.setAttribute("onclick","check_files(this)")
console.log(files[i]) //Print the files
newDiv.innerHTML = files[i];
divParent.appendChild(newDiv);
}

我需要在这个数据旁边添加图标。例如，如果是pdf文件，则为pdf图标。一旦创建了一个新的div，如何在Javascript中添加图标？

Answer 1

您是否考虑过基于css的解决方案？您可以使用伪元素将图标添加到任何元素中。这在.pdf旁边添加了另一个元素，您可以根据自己的目的对其进行样式设置。使用background-image可以添加图标。

.pdf {
padding-left: 35px;
position: relative;
}
.pdf:before {
content: "";
height: 20px;
width: 20px;
display: block;
background: url("https://via.placeholder.com/20");
position: absolute;
left: 0;
}

<div class="pdf">PDF</div>