初心者：JSで家計簿アプリを作っていてulタグに情報をtableタグを用いてappenchildしたいです。

前提・実現したいこと

初心者です

ここに質問の内容を詳しく書いてください。
Javascript を使って簡単な家計簿を作っています。

該当のソースコード

ソースコード
<body>
    <header class="header">Expense Tracker</header>
    <div class="container">
        <div class="navbar">
            <form class="form">
                <label class="label-date">Date:
                    <input type="date" id="date" name="date">
                </label>
                <label class="where">Where:
                    <input type="where" id="where" name="where">
                </label>
                <label class="what">What:
                    <input type="text" id="what" name="what">
                </label>
                <label class="price">Price:
                    <input type="text" id="price" name="price">
                </label>
                <label class="submit">
                <input type="submit" id="submit" name="submit">
                </label>


            </form>
        </div>

        <div class="mainbar">
            <p class="bought">Things You've Bought</p>
            <table class="table" border="1">
                <tr>
                    <th>Date</th>
                    <th>where</th>
                    <th>What</th>
                    <th>Price</th>
                </tr>
                <ul class="ullists" id="ullists">
                </ul>
            </table>
        </div>

    <script src="app.js"></script>
</body>

JS
    const $docs = document;
    const $submit = $docs.querySelector('input[name=submit]')
    const $form = $docs.querySelector('form')
    const $ul = $docs.getElementById('ullists');
    

    $submit.addEventListener('click', e => {
        e.preventDefault()

        const $date = $docs.querySelector('input[name=date]').value
        const $where = $docs.querySelector('input[name=where]').value
        const $what = $docs.querySelector('input[name=what]').value
        const $price = $docs.querySelector('input[name=price]').value

        var row_items = $docs.createElement('tr')
        const lists = []
        lists.push($date, $where, $what, $price)

        for(let i = 0; i < lists.length; i++) {
            var row = $docs.createElement('td')
            row.innerHTML = lists[i]
        }

        row_items.appendChild(row)
        $ul.appendChild(row_items)

        console.log(row_items);
        $form.reset()


    })

試したこと

submitボタンを押したときに、その情報を取得して、htmlに表示したいです。
なので、その情報をテーブルに入れてulにappendchildすることで表示したいのですが、
for分の所でおそらく引っかかっているのだと思います。
この場合どういった方法でulにappendしたほうがいいのでしょうか？