替换html中的占位符？

Question

我正在创建一个待办事项应用，并且我在用html im插入中的实际数据替换占位符时遇到麻烦

CODE：

// Selecting elements
const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");

// Classes names
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "LineThrough";

// Show todays date
const options = {weekday : "long", month:"short", day:"numeric"};
const today = new Date();
dateElement.innerHTML = today.toLocaleDateString("en-US", options);

function addToDo(toDo) {
    const item = '<li class="item"><i class="fa fa-circle-thin co" job="complete" id ="0"> </i><p class="text">${toDo}</p><i class = "fa fa-trash-o de" job="delete" id="0"></i></li>';

    const position = "beforeend";
    list.insertAdjacentHTML(position, item);


}

addToDo("Drink Coffee");

在html上，我试图用实际数据替换$ {toDo}。在底部，我使用“ Drink coffee”作为数据调用addToDo函数，但显示的全部内容实际上是$ {toDO}而不是Drink Coffee我不太确定我哪里出错了对于HTML格式，即时通讯也很抱歉，我不确定如何在多行中获取它而不会出现错误

任何帮助将不胜感激

Answer 1

您当前正在使用字符串文字：

const item = '<li class="item"><i class="fa fa-circle-thin co" job="complete" id ="0"> </i><p class="text">${toDo}</p><i class = "fa fa-trash-o de" job="delete" id="0"></i></li>';

不会将变量替换为其值。听起来您正在寻找template literal，它使用反引号代替单引号：

const item = `<li class="item"><i class="fa fa-circle-thin co" job="complete" id ="0"> </i><p class="text">${toDo}</p><i class = "fa fa-trash-o de" job="delete" id="0"></i></li>`;

Answer 2

您需要使用反引号`而不是单/双引号来进行字符串插值

const item = `<li class="item"><i class="fa fa-circle-thin co" job="complete" id ="0"> </i><p class="text">${toDo}</p><i class = "fa fa-trash-o de" job="delete" id="0"></i></li>`;