jsでsvgを生成した際に出たエラーを解消したい。

Question

###　✖️マークのアイコンをsvgで表示させたい。

todo listを作っています。
svgをcreateElementで生成し、それを親にappendした際に以下のエラーメッセージが発生しました。

エラーメッセージ

[object HTMLUnknownElement]

該当のソースコード

     <div class="todo">
                <h2 class="heading-2 todo__title">To Do List</h2>
                <form action="" class="todo__form" id="todoForm">
                    <input class="todo__input" type="text" id="todoInput">
                    <button class="todo__button" id="todoButton">add</button>
                </form>
                <ul class="todo__list" id="todoList">
                    <!-- <li class="todo__item">
                        <svg class="todo__icon">
                            <use xlink:href="img/sprite.svg#icon-cross"></use>
                        </svg>
                    </li>
                    <li class="todo__item">
                        <svg class="todo__icon">
                            <use xlink:href="img/sprite.svg#icon-cross"></use>
                        </svg>
                    </li>
                    <li class="todo__item">
                        <svg class="todo__icon">
                            <use xlink:href="img/sprite.svg#icon-cross"></use>
                        </svg>
                    </li> -->
                </ul>
            </div>

function buildTodo() {

    let button = document.getElementById('todoButton');
    let input = document.getElementById('todoInput');

    button.addEventListener('click', function (event) {
        event.preventDefault();
        if (input.value !== '') {
            let cross = document.createElement('svg');
            let use = document.createElement('use');
            let list = document.getElementById('todoList');
            let item = document.createElement('li');

            cross.className = 'todo__icon';
            item.className = 'todo__item';

            use.setAttribute('xlink:href', 'img/sprite.svg#icon-cross');
            cross.innerHTML = use;

            item.textContent = input.value;
            list.appendChild(item);
            item.appendChild(cross);
            cross.appendChild(use);
            console.log(list);

            if (list.childElementCount > 3) {
                item.appendChild(cross);
                console.log(item);
            }
        }
    })
}

Answer 1

item.innerHTML += '<svg class="todo__icon"><use xlink:href="img/sprite.svg#icon-cross"></use></svg>';