Вставка значка HTML в новый div с помощью Javascript

В этом проекте 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. Как добавить иконки в Javascript после создания нового div?

Вы не рассматривали решение на основе 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>

Вернуться на верх