Замена заполнителя в html?

Question

Я создаю приложение todo, и у меня возникли проблемы с заменой заполнителя фактическими данными в html я вставляю

КОД:

// 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 части im пытаюсь заменить $ {toDo} фактическими данными. Внизу я вызываю функцию addToDo с «Пить кофе» в качестве данных, но все, что отображается, это буквально $ {toDO}, а не пить кофе. Я не совсем уверен, где я ошибаюсь. Также извините за форматирование 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>`;

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>';

, который не заменяет переменные их значениями. Похоже, вы ищете литерал шаблона , в котором вместо одинарных кавычек используются обратные тики:

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>`;