index.php に以下のように ul や li があるのに main.js にも書くのかなと思い考えたのですが、
あっているかわからないので確認をお願いします！

    <ul>
      <?php foreach ($todos as $todo) : ?>
      <li data-id="<?= Utils::h($todo->id); ?>">
        <input type="checkbox"<?= $todo->is_done ? 'checked' : ''; ?>>
        <span><?= Utils::h($todo->title); ?></span>

        <span class="delete">x</span>

      </li>
      <?php endforeach; ?>

    </ul>

1.まず、form をエンターすると fetch() で php に送信し、そのあとに fetch() の下に書いた

    input.value = '';
    input.focus();

    console.log('Finish!');

が処理される。

2.処理されると次は then が処理される。この時、データベースの todos の情報は更新されているが今回はページをリロードしないため、li は追加されない。

3.そこで、addTodo() によって id や、title の情報の入った li を作り、 ul.insertBefore(li,ul.firstChild); によって追加している。

4.このようにすることによって処理の負荷を抑えている。

といったような感じで大丈夫ですか？