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>标记无效（如前所述）。但是，颜色正在发挥作用。