时间戳

首页 > 解决方案 > 替换html中的占位符？

javascript - 替换html中的占位符？

问题描述

我正在创建一个待办事项应用程序，但在用插入的 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 部分，我试图用实际数据替换 ${toDo}。在底部，我用“喝咖啡”作为数据调用 addToDo 函数，但显示的所有内容实际上都是 ${toDO} 而不是喝咖啡我不太确定我哪里出错了也很抱歉 html 格式我不知道如何得到它在多行上没有错误

任何帮助，将不胜感激

标签： javascriptdom

解决方案

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

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

推荐阅读