dom_dom0900_001

Todoリストで入力値から<li>を追加する最も標準的な方法はどれですか？

  1. ul.innerHTML += “<li>” + input.value + “</li>” を毎回実行する
  2. const li = document.createElement(“li”); li.textContent = input.value; ul.appendChild(li);
  3. document.write(“<li>” + input.value + “</li>”) を使う
  4. <li>テンプレートをHTMLに書いておき、location.reload()で反映する
正解
  1. const li = document.createElement(“li”); li.textContent = input.value; ul.appendChild(li);
解説

innerHTMLでの都度連結は再パースが発生しイベントが飛ぶ可能性もあり非効率です。createElementとappendChildでノードを生成・追加するのが安全で一般的です。

使用例（サンプルコード）

[ html ]

<ul id="todo"></ul>
<input id="txt"><button id="add">Add</button>
<script>
const ul = document.getElementById('todo');
const input = document.getElementById('txt');
document.getElementById('add').addEventListener('click', () => {
  if (!input.value.trim()) return;
  const li = document.createElement('li');
  li.textContent = input.value.trim();
  ul.appendChild(li);
  input.value = '';
});
</script>