【javascript】要素追加時にclassを付与して追加する方法(createElement)

現在todoリストをhtml,css,javascriptで作成しているが、追加する要素にclassを付与して作成したいときどうすればよいのかに詰まってしまいました。

 var todoBox = document.createElement("li");
 todoBox.textContent = todoInput.value;
 todoList.appendChild(todoBox)

# 結果
<li>test</li>

appendChildでliタブを追加しているが、このまま作成すると#結果の通りliタブのみが作成されている。 タブの中に表示されているtestは別にtodoInputという入力欄に入力された文字である。 ここでは説明を省く

目的は

のようにclass属性を付与したliタブを追加するようにすることである。 調べた結果、以下の通りでした。

var todoBox = document.createElement("li");
todoBox.className = "task";
todoBox.textContent = todoInput.value;
todoList.appendChild(todoBox)

# 結果
<li class="task">test</li>

todoBox.className = "task";を追加するだけですね。意外と簡単にできるものでした。