前端js修改dom里的元素

描述:点击侧边栏的item,就给我item添加li描述 

如图:

主要代码:

const getItemLi = (arr,key) => {//循环给ul里添加li元素
    console.log(arr,key)
    arr.forEach(itemLi => {
        var li=document.createElement('li')//创建li
        li.innerText=itemLi
        let liDiv=document.getElementById(key)//找到ul元素
        console.log(liDiv)
        liDiv.appendChild(li)//给ul添加li元素
    })
}

const titleInfoList = [
    {
        key: 0,
        path: "/en/whatsai",
        info: "AI Fundamentals",
        titleArr: [
            "What is Artificial Intelligence (AI)?",
            "History and Evolution of AI",
            "Basic Components and Terminologies in AI"
        ]
    },
    {
        key: 1,
        path: "/en/UnderstandingMachineLearning",
        info: "Understanding Machine Learning",
        titleArr: [
            "Introduction to Machine Learning and its Core Concepts",
            "Supervised, Unsupervised, and Reinforcement Learning",
        ]
    }
]

const titlePath = window.location.pathname
const getItemLi = (arr,key) => {//循环给ul里添加li元素
    console.log(arr,key)
    arr.forEach(itemLi => {
        var li=document.createElement('li')//创建li
        li.innerText=itemLi
        let liDiv=document.getElementById(key)//找到ul元素
        console.log(liDiv)
        liDiv.appendChild(li)//给ul添加li元素
    })
}
titleInfoList.forEach(item => {
    if (item.path === titlePath) {
        listArr[item.key].innerHTML = `<div 
        class="v-list-item__title v-list-item__title_hover">
         <div>${item.info}<div>
         <ul id="titel${item.key}" ></ul>
        </div>`
        getItemLi(item.titleArr,'titel'+item.key)//循环给ul里添加li元素
        listArrItem[item.key].style.background='#FFFFFF1A'

    }
})