おそらくとても簡単なjavascript（jquery)の要素の追加記述方法

Question

おそらくとても簡単なことにはまっています。
nodeでサーバーから来たデータをHTMLに動的に表記しています。

<tbody id="tb">
</tbody>

socket.on('message', function(name) {
	  $('#tb').prepend($('<tr id="bar"></tr>'));
	  $('#bar').append($('<th scope="row" id="bar2">' + name + '</th>'));
    });

結果
A
B
C
D

となります。これはDから順に追加されている動きだと思いますが、そこで
D
C
B
A
となるように書き換えたいと思いました。
そこで

socket.on('message', function(name) {
	  $('#tb').append($('<tr id="bar"></tr>'));
	  $('#bar').append($('<th scope="row" id="bar2">' + name + '</th>'));
    });

としましたが、
結果
ABCD
と横方向に追加されて行きました。
ID：tbに対して、新規追加分が先頭か末尾かの違いがprependとappendと思っていましたが違うのでしょうか。
実際には項目数はname以下10個程度テーブル上に並んでおり、苦労しております。

どなたかご指摘、ご教示いただけないでしょうか。

Answer 1

どなたかご指摘、ご教示いただけないでしょうか。

そもそも論として、同じIDの要素はHTML内に1つしか存在できません。socket.on('message')が複数回動くと、<tr id="bar"></tr>が複数追加されてしまい、意図しない挙動となります。

Answer 2

idはむしろ不要(親のtable以外)では？

$(function(){
  ["A","B","C","D"].forEach(name=>{
    $('#tb').prepend($('<tr>').append($(`<th scope="row">${name}</th>`)));
  });
});

Comments

[yambejp]

socketは再現できないので、forEachで代用してあります