insertAdjacentHTML不是todolist中的函数

Question

I was making my first pure Js project of todolist. I want when user adds an item in the list it gets it placed at the list. I was using this code I saw in a tutorial but it gives an error.

It gives an error: jeep.insertAdjacentHTML is not a function

Here is the markup:

 <section class="listContent">
    <div class="container">
        <ul class="list" id="deep">
            <li style="text-align: center" id="itemList">
                <!--   < i class="fa fa-circle-o pull-left" id = "circle" aria - hidden="true" > </i>
                <p class="text" > DRINK COFFEE < /p>
                <i class="fa fa-trash pull-right" id = "delete" aria - hidden="true" > </i> -->
            </li>
        </ul>
    </div>
</section>

Here is the JS

const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
function addToDo(todo) {
    const item =
        `<i class="fa fa-circle-o pull-left" job="complete" id="circle" aria-hidden="true"></i>
        <p class="text"> ${todo}</p>
        <i class="fa fa-trash pull-right" id="delete" job="delete" aria-hidden="true"></i>
        ` ;

    const position = "beforeend";
    console.log(item);
    console.log(position);
    jeep.insertAdjacentHTMl(position, item);

}

addToDo("drink coffe");

Answer 1

first try .insertAdjacentHTML - the L should be capitalized. Also it looks like in the HTML markup that element lives inside of the <li> no adjacent to it. It looks like you might want to use .appendChild() on the <ul id="deep"></ul>