querySelector()の使い方がうまくいかない。

Question

JavaScript初心者です。
Run For IT！という名前のゲームを作っています。各人が順番で一度に6個のサイコロを振り、1の目から連続して並んだ目がでれば、そのサイコロ1個につき5点とし、一番さきに合計点が100点に達したものが勝ちとなる遊戯のパソコンゲーム版です。
以下のコードは全体のゲームのうち各参加者の名前の下に得点のあった出目を並べてゆく部分のものです。
一階層上の<table id="score1">のなかに<tr><td>で囲み横にそろえた6つのサイコロの＜img>を上から下に並べようとしています。
alertを使ってデバッグしています。しかしコード中ほどの alert('td='+td);がnullとなってしまい先に進みません。
その直前の行の document.querySelector('#id'); のどこが悪いのかわかりません。
まだ命令に不慣れな状態で稚拙な誤りにさぞ辟易されるかもしれないと存じておりますが、どうか解決法を御教授くださいますようお願いします。

コード
//出た目に得点があったらその賽の目の画像をその競技者の下に表示する。
		if (point>0){
			alert('point='+point);
			let score1 = document.querySelector('#score1');
			let tr = document.createElement('tr');
			q++;
			let str = 'td' + q;
			alert('str='+str);
			tr.innerHTML = '<td id="td"></td>';
  			let td = document.querySelector('#td');
			alert('td='+td);
			td.setAttribute('id',str);
			alert('tr.innerHTML='+tr.innerHTML);
			for(let n=0;n<6;n++){
				let rollImage = document.createElement('img');
				rollImage.setAttribute('src',album[roll[n]-1].src);
				rollImage.setAttribute('alt',album[roll[n]-1].msg);
				td.insertBefore(rollImage,null);
			}
			score1.appendChild('tr');
		}
	
	```

Answer 1

let td = document.querySelector('#td');

の実行時点で、変数 tr の要素はcreateElementされただけで
html内のどこにも追加されていません。

要素がhtml上にないため、 document.querySelector('#td'); で見つけられない状態になっています。

Answer 2

			let tr = document.createElement('tr');
           ...
			tr.innerHTML = '<td id="td"></td>';
  			let td = document.querySelector('#td');
           ...
			score1.appendChild('tr');

document.querySelector() や documen.getElementById() は、document から辿れるツリーにある要素だけを対象に検索します。もし score1 がすでにツリーに入っているとすると、score1.appendChild('tr') は document.querySelector() よりも前に実行すべきです。

もし score1 がツリーに入っていないなら、まずはそこを解決する必要があります。