Checkerboard template (spaces and zeros) does not work with jQuery

Question

This is just a little exercise, but something is not working, and I do not quite understand why. What I'm trying to do is make a checkerboard pattern of 0 and spaces, so there are no spaces or 0 directly next to above or below another space or 0. For some reason they seem to line up the 0s and spaces:

0 0 0 0
0 0 0 0
0 0 0 0
0 0 0 0 0

instead of alternating. Here is my Javascript:

var length = 8;
var board = "";

$(document).ready(function() { 
    for (var i = 0; i < length; i++) {
        for (var j = 0; j < length; j++) {
            if ((i + j) % 2 == 0) {
                $('#chessboard').append(" ");
            } else {
                $('#chessboard').append("0");
            };
        };
        $('#chessboard').append("<br/>");
    };
});

Help is much appreciated. Thanks!

Answer 1

! , , , .

$('#chessboard').append(" "); ,

`$('#chessboard').append(" ");`

Answer 2

, . , , .

var length = 8;
var board = "";

$(document).ready(function() { 
    for (var i = 0; i < length; i++) {
        for (var j = 0; j < length; j++) {
            if ((i + j) % 2 == 0) {
                $('#chessboard').append("-");
            } else {
                $('#chessboard').append("0");
            };
        };
        $('#chessboard').append("<br/>");
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chessboard"></div>

Hide result