javascript - jQuery の $.append() がループを壊してしまうのはなぜですか?

Question

画面に色の配列でテキストを描画しようとしています。$.append()ただし、タグでjQueryを使用<span>すると、ループが停止し、何も色付けされません。これは次のようになります。

        var pixelsjson = '[{"red":232,"green":255,"blue":255},{"red":230,"green":255,"blue":255},{"red":229,"green":255,"blue":255},{"red":228,"green":255,"blue":255},{"red":227,"green":255,"blue":255},{"red":226,"green":255,"blue":255},{"red":224,"green":255,"blue":255},{"red":223,"green":255,"blue":255},{"red":222,"green":255,"blue":255},{"red":221,"green":254,"blue":255},{"red":220,"green":254,"blue":255},{"red":219,"green":254,"blue":255},{"red":217,"green":253,"blue":255},{"red":215,"green":253,"blue":255},{"red":213,"green":251,"blue":255},{"red":210,"green":250,"blue":255},{"red":207,"green":248,"blue":255},{"red":203,"green":246,"blue":255},{"red":200,"green":244,"blue":255},{"red":196,"green":242,"blue":255},{"red":96,"green":247,"blue":154},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54}]]';

        var pixels = JSON.parse(pixelsjson);
        var imgheight = 80;
        var imgwidth = 106;

        $(document).ready(function () {
            var drawcount = 0;
            for (var i = 0; i < imgheight; i++) {
                $("#image").append("<br>");
                for (var j = 0; j < imgwidth; j++) {
                    $("#image").append("<span style='color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'>");
                    switch (drawcount % 18) {
                        case 0:
                            $("#image").append("/");
                            break;
                        case 2:
                            $("#image").append("-");
                            break;
                        case 3:
                            $("#image").append("/");
                            break;
                        case 4:
                            $("#image").append("-");
                            break;
                        case 5:
                            $("#image").append("/");
                            break;
                        case 6:
                            $("#image").append("-");
                            break;
                        case 7:
                            $("#image").append("(");
                            break;
                        case 8:
                            $("#image").append("8");
                            break;
                        case 9:
                            $("#image").append("8");
                            break;
                        case 10:
                            $("#image").append(")");
                            break;
                        case 11:
                            $("#image").append("-");
                            break;
                        case 12:
                            $("#image").append("\\");
                            break;
                        case 13:
                            $("#image").append("-");
                            break;
                        case 14:
                            $("#image").append("\\");
                            break;
                        case 15:
                            $("#image").append("-");
                            break;
                        case 16:
                            $("#image").append("\\");
                            break;
                        case 17:
                            $("#image").append("  ");
                            break;
                    }
                    $("#image").append("</span>");
                    drawcount++;
                }
            }
        });

これはhtmlです：

<div id="image" style="font-family:Courier New, Courier, monospace; font-size: 10px;"></div>

スクリプトを次のように更新しました。

       $(document).ready(function () {
            var drawcount = 0;
            for (var i = 0; i < imgheight; i++) {
                $("#image").append("<br>");
                for (var j = 0; j < imgwidth; j++) {
                    $("#image").append("<span style='position:relative; color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'></span>");

                    switch (drawcount % 18) {
                        case 0:
                            $("#image span").append("/");
                            break;
                        case 2:
                            $("#image span").append("-");
                            break;
                        case 3:
                            $("#image span").append("/");
                            break;
                        case 4:
                            $("#image span").append("-");
                            break;
                        case 5:
                            $("#image span").append("/");
                            break;
                        case 6:
                            $("#image span").append("-");
                            break;
                        case 7:
                            $("#image span").append("(");
                            break;
                        case 8:
                            $("#image span").append("8");
                            break;
                        case 9:
                            $("#image span").append("8");
                            break;
                        case 10:
                            $("#image span").append(")");
                            break;
                        case 11:
                            $("#image span").append("-");
                            break;
                        case 12:
                            $("#image span").append("\\");
                            break;
                        case 13:
                            $("#image span").append("-");
                            break;
                        case 14:
                            $("#image span").append("\\");
                            break;
                        case 15:
                            $("#image span").append("-");
                            break;
                        case 16:
                            $("#image span").append("\\");
                            break;
                        case 17:
                            $("#image span").append("  ");
                            break;
                    }

                    //$("#image").append("</span>");
                    drawcount++;
                }
            }
        });

ただし、<br>タグが機能しなくなりました (以前のように)。ただし、色は機能しています。