Javascript 如何使图标显示在每个<；李>；要素

我有这个问题。因此，每当我在输入标记中键入新词时，我的站点都会创建一个新对象，然后该对象会显示在列表中，我希望在对象文本所在的行中有一个垃圾桶图标。这就是我留下的代码，代码显示的不是图标，而是整个图标代码。有什么想法吗？ 我的代码：

const alert=document.querySelector（“#alert”）；
让单词=[]；
const addWord=（ev）=>{
ev.preventDefault（）；
如果(
document.getElementById（'input-first-text'）。值！=''&&
document.getElementById（'input-second-text'）。值！=''
) {
让字={
id:Date.now（），
homeLanguageWord:document.getElementById（'input-first-text'）。值，
foreignLanguageWord:document.getElementById（'input-second-text'）。值，
};
推（字）；
document.getElementById（'input-first-text'）。值=“”；
document.getElementById（'input-second-text'）。值=“”；
console.warn（'added'，{words}）；
if（words.length！=0）{
设para=document.createElement（'li'）；
让节点=document.createTextNode(
单词[words.length-1]。母语单词+“”+单词[words.length-1]。外语单词，
);
子节点（节点）段；
让nodeIcon=document.createTextNode(`
`);
第3段（诺代肯）；
var元素=document.getElementById（'word-list'）；
要素.附件（第6段）；
}
document.getElementById（'alert'）。innerHTML=''；
}否则{
document.getElementById（'alert'）.innerHTML='您需要写点什么！'；
}
};
document.getElementById（'submitbtn'）。addEventListener（'click'，addWord）；

您不能使用createTextNode创建svg元素，它只用于简单文本，但您可以尝试使用以下方法：

const wrapper=document.getElementById（'wrapper'））
const svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
const path1=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
const path2=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
路径1.setAttribute（“d”、“M5.5 5.5A.5.5 0 0 1 6 V6A.5.5 0 0 1-1 0V6a.5.5 0 1.5-.5zm2.5 0a.5.5 0 0 0 1.5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1.5-.5zm3.5A.5.5 0 0 0 0 0 0-1 0V6a.5.5.5.5 0 0 0 0 0 0 0 0 0 0 0 0 1 0V6z”）；
路径2.setAttribute（“d”，“M14.5 3a1 1 0 1-1 1H13v9a2 2 0 1-2 2H5a2 2 0 1-2-V4H-.5a1 1 0 1-1-1V2a1 1 0 1-1-1H6a1 1 0 1-1-1h2a1 1 0 1 1h3.5a1 1 0 1 1v1zM4.118 4L4.059V13a1 0 0 0 1 0 0 0 1-1-1V4ZM.059L11.882 4H4.5-3H11Z”）；
路径2.setAttribute（“填充规则”、“偶数”）
svg.appendChild（路径1）
appendChild（路径2）
const listElements=wrapper.querySelectorAll（'li'）
for（列表元素的let元素）{
元素.appendChild（svg.cloneNode（true））
}

li{
显示器：flex；
对齐项目：居中；
}
跨度{
显示：内联块；
高度：24px；
填充：4px；
}
svg{
宽度：24px；
高度：24px；
}

A
B
C

您不能使用createTextNode创建svg元素，它只用于简单文本，但您可以尝试使用以下方法：

const wrapper=document.getElementById（'wrapper'））
const svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
const path1=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
const path2=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
路径1.setAttribute（“d”、“M5.5 5.5A.5.5 0 0 1 6 V6A.5.5 0 0 1-1 0V6a.5.5 0 1.5-.5zm2.5 0a.5.5 0 0 0 1.5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1.5-.5zm3.5A.5.5 0 0 0 0 0 0-1 0V6a.5.5.5.5 0 0 0 0 0 0 0 0 0 0 0 0 1 0V6z”）；
路径2.setAttribute（“d”，“M14.5 3a1 1 0 1-1 1H13v9a2 2 0 1-2 2H5a2 2 0 1-2-V4H-.5a1 1 0 1-1-1V2a1 1 0 1-1-1H6a1 1 0 1-1-1h2a1 1 0 1 1h3.5a1 1 0 1 1v1zM4.118 4L4.059V13a1 0 0 0 1 0 0 0 1-1-1V4ZM.059L11.882 4H4.5-3H11Z”）；
路径2.setAttribute（“填充规则”、“偶数”）
svg.appendChild（路径1）
appendChild（路径2）
const listElements=wrapper.querySelectorAll（'li'）
for（列表元素的let元素）{
元素.appendChild（svg.cloneNode（true））
}

li{
显示器：flex；
对齐项目：居中；
}
跨度{
显示：内联块；
高度：24px；
填充：4px；
}
svg{
宽度：24px；
高度：24px；
}

A
B
C

看看这个惊人的答案：我尝试更改为CreateElements（），但它仍然不适用于meTake看看这个惊人的答案：我尝试更改为CreateElements（），但它仍然不适用于meThis。它工作得很好，但我现在遇到了另一个问题，每次我创建一个新对象并显示它时，svg只添加到第一个对象中，我如何解决这个问题？我想问题在于不能多次使用同一个元素。您可以尝试使用

wrapper.appendChild（svg.cloneNode（true））

克隆元素，这样每次调用appendChild时都会使用新元素。我不认为这是问题所在，因为它没有改变任何东西，也许您知道另一种方法如何做到这一点？我对使用JS编程非常陌生，因此非常感谢您的帮助。我已经用多个

元素对它进行了测试，效果很好，问题应该在代码的其他地方。我现在将更新代码示例。这很好，但我现在遇到了另一个问题，每次我创建一个新对象并显示它时，svg只添加到第一个对象，我如何解决这个问题？我想问题是不能多次使用同一元素。您可以尝试使用

wrapper.appendChild（svg.cloneNode（true））

克隆元素，这样每次调用appendChild时都会使用新元素。我不认为这是问题所在，因为它没有改变任何东西，也许您知道另一种方法如何做到这一点？我对使用JS编程非常陌生，因此非常感谢您的帮助。我已经用多个

元素和