JavaScript上で作成された要素に対して、イベントリスナーを発生させることができない

JavaScript上で作成したものに対して
イベントリスナーを発生させられないという事案が発生しております。

例えばJavaScriptにチェックマークを作成し、
チェックマークにクラス「.beforeCheck」と指定し、空欄状態にしたいと思っております。
クリックした際、クラス「.checked」を付与しチェックマークを付けた状態にし、
「.beforeCheck」を外したいと思いますが、
「Uncaught TypeError: Cannot read property 'addEventListener' of null」
と表示されてしまい、上記の動作ができません。

なお、チェックマークのアイコンはCSS上でFontAwesomeを使用しております。

JavaScript上で作成された要素にイベントリスナーを発生させるには
どのような処理が必要なのか、ご教示いただければ幸いです。

JavaScript
1'use strict'
2{
3	const createBtn = document.getElementById('createBtn');
4	const todos = document.getElementById('todos');
5	const checkHtml = `<span id="checkMark" class="checkMark beforeCheck"></span>`;
6
7	function addCheck () {
8		const li = document.createElement('li');
9		todos.appendChild(li);
10		li.insertAdjacentHTML('afterbegin', checkHtml);
11	};
12
13	createBtn.addEventListener('click', e => {
14		// デフォルトのイベントを無効
15		e.preventDefault();
16		addCheck();
17	});
18
19	const checkMark = document.getElementById('cheakMark'); 
20
21	checkMark.addEventListener('click', e => {
22		if(e.target.classList.contains('beforeCheck')){
23			e.target.classList.remove('beforeCheck');
24			e.target.classList.add('checked');
25		} else if (e.target.classList.contains('checked')) {
26			e.target.classList.remove('checked');
27			e.target.classList.add('beforeCheck');
28		};
29	});
30}