DOM操作が苦手なJavaScript初学者が保留機能付きメモアプリを作ってみた #HTML

DOM操作の情報が多すぎて何か最善かわからないまま、
つぎはぎの知識で何とか完成しました。
もう少し勉強したらReactを学びたいと思います。
至らぬところが多いので、ご意見や改善案をいただけますと幸いです。
何かいい教材がありましたら教えてください。
horyuMemo.html
<!DOCTYPE html>
<html lang="ja">

<head> 
    <title>memo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Document</title>
</head>
<body>
    <div>
        <input id="addText" placeholder="やることを入力"/>
        <button id="addButton"> 追加</button> 

    </div>
    <div>
        <p>メモ</p>
        <ul id="todoList">
            <div>
                <li>やることリスト</li>
            <div>

        </ul>
    </div>
    <div>
        <p>保留中</p>
        <ul id="pendList">
            <div>
            <li>保留中リスト
            </li>
            <div>
        </ul>
    </div>
    <script>
    //自作関数（on_click_add)呼び出しは末尾
    //ボタンクリック時に各タグを生成する。
    const onClick =()=>{

        //addTextの要素のvalueをinput_textに代入
        const inputText = document
        .getElementById("addText").value;
            
        //入力欄を削除
        document.getElementById("addText").value="";

        createtodoleteList(inputText);

    };//on_click_add関数の終わり

    //自作関数dellist要素を削除する
    //引数(target)は要素.parentNode（delbutとpendbut)
    const dellist =(target)=>{

    // removeChild=因数に指定したノードを削除する
    document.getElementById("todoList").removeChild(target);
    };

    //未完了リストに追加する関数
    const createtodoleteList=(text)=>{
        //divタグ生成
         //createElementは新たにhtml要素を追加する。(div,li等)
         const div =document.createElement("div");
         div.className ="listRow";

         //liタグ生成
         const li =document.createElement("li");

         //liタグにtextを代入
         li.innerText = text;

        //ボタンタグの生成（完了ボタンの生成）
        //pendbut=pend_Button:完了ボタンの変数
        //createElementでpendbutのボタン要素を追加
        const pendbut = document.createElement("button");

        //innetText関数でボタンに文字（保留）を埋め込む。
        pendbut.innerText ="保留に回す";

        //自作関数（関数名なし＝pendbutが押されたら）
        //addEventListener＝イベント時に関数を実行する関数
        pendbut.addEventListener("click", ()=>{

          //押された完了ボタン（pendbut)の親ノード（DIV）
          //を未完了リストから削除
          //dellistは自作関数
          //pendbutを消す
          dellist(pendbut.parentNode);

          //完了ボタンのテキストを取得
          //addTargetは変数
          //parentNodeは指定した子ノードの親ノードを取得
          //子ノードpendbut
          const addTarget = pendbut.parentNode;

          //firstElementChild=最初の子要素を追加する。
          //最初の子要素のテキストをtextに代入する
          const text =addTarget.firstElementChild.innerText;

          //DIV以下を初期化
          //textContent関数でnullにする。
          addTarget.textContent = null;

          //タグ生成
          //createElementで新規html要素生成
          const li = document.createElement("li");

          //liタグにtextを代入（innnerText関数使用）
          li.innerText = text;

          //ボタンタグ生成
          //変数backButton
          const backButton = document.createElement("button");

          //バックボタンのテキストに戻すを代入する
          backButton.innerText ="やることリストに戻す";

          //自作関数（関数名なし＝backButtonが押されたら）
          //addEventListener＝イベント時に関数を実行
          backButton.addEventListener("click", ()=>{

            //押された戻すボタンの親タグ(div)を完了リストから削除
            const delTarget = backButton.parentNode;

            document.getElementById("pendList")
            .removeChild(delTarget);

            const text = backButton.parentNode.
            firstElementChild.innerText;

            createtodoleteList(text);
        });//pendbutクリック関数終わり

        //divタグの子要素に各要素を設定
        addTarget.appendChild(li);
        addTarget.appendChild(backButton);

        //完了リストに追加
        document.getElementById("pendList")
        .appendChild(addTarget);

        });
           

        //削除ボタンタグの作成
        //delbutというボタンタグのをクリエイトエレメント生成
        const delbut = document.createElement("button");

        //delbutの文字を完了・削除とする
        delbut.innerText ="完了・削除";

        //自作関数（関数名なし＝delbutが押されたら）
        //addEventListener＝イベント時に関数を実行
        delbut.addEventListener("click", ()=>{

          //押された削除ボタンを機能させる
          //dellist=自作関数
          //delbut.parentNodeを削除
          dellist(delbut.parentNode);
         });//delbutクリック関数終わり

           //divタグの子要素に各要素を設定
           //appendChild子ノードの最後にノードを追加
           div.appendChild(li);
           div.appendChild(pendbut);
           div.appendChild(delbut);

           //未完了のリストに追加
             //todolistは未完成のTODOのID
           document.getElementById("todoList")
           .appendChild(div);
    };

    //関数onClickを使用
      //addEventListener＝イベント時に関数を実行
    document.getElementById("addButton")
    .addEventListener("click", () => onClick());
    </script>
    
</body>
</html>