当运行eventlistener时，我的代码执行${input.value}，而不是输入部分的文本，这可能是错误的

Question

HTML代码，指示各个元素的类和id。

<div class="input-group mb-3" >
<input type="text" class="form-control" id="input-item" value="">
<div class="input-group-preppend">
<button type="button" class="btn btn-success" id="add-item" >Add</button>
<button type="button" class="btn btn-info" id="delete">Delete</button>
</div>
</div>

<div id="display-item">
<div class="item">

<!--<p>New list items appear here!</p>
<div class="item-btn">
<i class="fa-regular fa-pen-to-square"></i> 
<i class="fa-solid fa-square-xmark"></i>
</div>-->
</div> 

</div>

JS代码显示了当我在输入部分输入一个单词并点击添加时应该发生的事情，它显示的是${input.value}，而不是

let input = document.querySelector('#input-item');
let add = document.querySelector('#add-item');
let display = document.querySelector('#display-item');
add.addEventListener('click', () => {
if (input.value.trim() !=0) {
let newItem= document.createElement('div');
newItem.classList.add('item')
newItem.innerHTML = '<p> ${input.value} </p> <div class="item-btn"> <i class="fa- 
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>'

display.appendChild(newItem);
input.value= '';
} else {
alert('please add an item!')
}
});

这是js代码

Answer 1

使用

`

而不是

'

newItem.innerHTML = `<p> ${input.value} </p> <div class="item-btn"> <i class="fa- 
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>`