💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
JavaScriptでTODO追加機能を実装する方法
📌
結論
TODO追加は createElement + appendChild + フォーム処理
📝 実際のコードはこちら
form.addEventListener('submit', (e) => {
e.preventDefault();
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
input.value = '';
});まとめ
・e.preventDefault() でフォームのデフォルト送信を防ぐ
・入力値で要素を作って追加
・追加後にinputを空にする
演習で試してみよう
TODO追加機能を実装してみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
inputの値とボタンクリックで、ulにliを追加する処理を書いてください。
詰まったらヒント
createElement, appendChild, value