javascript - 为什么我的代码会引发无效或意外的令牌错误？

Question

为什么我的代码不起作用？似乎解释器没有将 listItem 变量识别为一串新元素。由于某种原因，它似乎不起作用。

const draggable_list = document.getElementById("draggable-list")
const check = document.getElementById("check")

const richestPeople = [
    'Jeff Bezos',
    'Elon Musk',
    'Bernard arnault',
    'Bill Gates',
    'Mark Zuckerberg',
    'Warren Buffet',
    'Larry Ellison',
    'Larry Page',
    'Sergery Brin',

]

const listItems = []
let dragStartIndex
//createList()

function creatList(){
    [...richestPeople.forEach((person, index) => {
        const listItem = document.createElement('li')
        listItem.setAttribute('data-index', index)
//the code below does not seem to light up as a string. 
        listItem.innerHTML = '
            <span class="number">${index + 1}</span>
            <div class="draggable" draggable="true"></div>
            <p class="person-name">${person}</p>
            <i class="fas fa-grip-lines"></i>
        '
    listItems.push(listItem)
        draggable_list.appendChild(listItem)

    })]

    listItems.push(listItem)
    draggable_list.appendChild(listItem)

}

标签： javascripthtml

Answer 1

使用反引号而不是单引号：

const draggable_list = document.getElementById("draggable-list")
const check = document.getElementById("check")

const richestPeople = [
    'Jeff Bezos',
    'Elon Musk',
    'Bernard arnault',
    'Bill Gates',
    'Mark Zuckerberg',
    'Warren Buffet',
    'Larry Ellison',
    'Larry Page',
    'Sergery Brin',

]

const listItems = []
let dragStartIndex
//createList()

function creatList(){
    [...richestPeople.forEach((person, index) => {
        const listItem = document.createElement('li')
        listItem.setAttribute('data-index', index)
//the code below does not seem to light up as a string. 
        listItem.innerHTML = `
            <span class="number">${index + 1}</span>
            <div class="draggable" draggable="true"></div>
            <p class="person-name">${person}</p>
            <i class="fas fa-grip-lines"></i>
        `
    listItems.push(listItem)
        draggable_list.appendChild(listItem)

    })]

    listItems.push(listItem)
    draggable_list.appendChild(listItem)

}