title: jQuery's $.append() breaks my loop, why?
body: <p>I'm trying to draw some text in an array of colors to the screen. However, when using jQuery's <code>$.append()</code> with the <code>&lt;span&gt;</code> tag, it stops my loop and does not color anything. This is what it looks like:</p>
  
  <pre><code>        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 &lt; imgheight; i++) {
                  $("#image").append("&lt;br&gt;");
                  for (var j = 0; j &lt; imgwidth; j++) {
                      $("#image").append("&lt;span style='color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'&gt;");
                      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("&lt;/span&gt;");
                      drawcount++;
                  }
              }
          });
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;div id="image" style="font-family:Courier New, Courier, monospace; font-size: 10px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I updated the script to:</p>
  
  <pre><code>       $(document).ready(function () {
              var drawcount = 0;
              for (var i = 0; i &lt; imgheight; i++) {
                  $("#image").append("&lt;br&gt;");
                  for (var j = 0; j &lt; imgwidth; j++) {
                      $("#image").append("&lt;span style='position:relative; color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'&gt;&lt;/span&gt;");
  
                      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("&lt;/span&gt;");
                      drawcount++;
                  }
              }
          });
  </code></pre>
  
  <p>However, now the <code>&lt;br&gt;</code> tag isn't working (as before). However, the colors are working.</p>