将图标设置为将插入到事件中的元素

Question

得到了这个页面，https://jsfiddle.net/twpn01Lz/。这是一个图书图书馆。

我正在尝试找到一种方法，每当有人选择单选按钮时添加勾号图标或 X 图标。

目前，我可以获取单选按钮的值并在 JS 中使用它，但我不知道如何使用该值的图标。我正在寻找一种在 JS 中替换它的方法，但找不到，我也在寻找一种直接在 HTML 中更改它的方法，但没有运气。

function addBookToList(book) {
const list = document.querySelector('#book-list');
const row = document.createElement('tr');
row.innerHTML = `
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.pages}</td>
<td>${book.read}</td>
<td>
<a href = '#' class='delete'> 
<i class="fas fa-trash-alt delete">
</I>
</a>
</td>
`
list.appendChild(row);
}

Answer 1

你的意思是

https://jsfiddle.net/mplungjan/yx4k6thw/

let read = document.querySelector('#radio1').checked ? "✔":"𝗫";

或者也许

let readIt = document.querySelector('#radio1').checked;
let read = `<i class="fas fa-${readIt?"check":"times"}"></i>`;

Answer 2

所以你想设置你的单选按钮的样式吗？或者您希望 X 或勾号出现在哪里？

如果你想设置按钮的样式，请查看这个。

使用 CSS 设置复选框和单选按钮的样式