如何在文本前的单元格中添加图标

Question

I want to add to the table cell a Font-Awesome icon. But I need to insert it before this cell text. How to do it via JavaScript or Jquery ?

That's my code:

var song_nameL = tr.insertCell(0);
song_nameL.innerHTML = songName;
var fa_times = song_nameL.appendChild(document.createElement("i"));
fa_times.className = "fa fa-times";

As you see, it appears after the text. And if I put song_nameL.innerHTML = songName; to the end of this code, there will be no icon. I tried to increase zIndex of icon, but it didn't help.

Answer 1

You have to prepend that <i> element,

var fa_times = song_nameL.insertAdjacentHTML('afterbegin',"<i class='fa fa-times'></i>"));

by using .insertAdjacentHTML("position", "htmlString");

Answer 2

<i>元素的HTML代码应在歌曲名称之前/之前，因此请执行以下操作：

song_nameL.innerHTML = '<i class="fa fa-times"></i>' + song_nameL;

Answer 3

if you need the object you could use:

var fa_times = document.createElement("i");
fa_times.className = "fa fa-times";
song_nameL.insertBefore(fa_times, song_nameL.childNodes[0]);