Creating sketchpad: difference between .html() and .append()?

Question

I'm "copying" this sketchpad project that is meant to fill up a page with an X by X square grid. In order to do so, I had to create a div container (filled with X squares), and then continue adding X div containers with .append().

When creating (say) a 16x16 square grid, the sketchpad shows up perfectly. However, when I try to create a 64x64, the first, few rows of the sketchpad only fill up partially.

Looking into the problem, I notice the JS file (github), I know that this line of code helps, but I don't know why:

$('#grid_container').html("");

In other words, why does .append() suffice for a smaller sketch, but not for a bigger sketch?

Answer 1

$('#grid_container').html("") is not needed the first time because the div is already empty. But when you click another button, the intention is that it creates a whole new grid. So you want to empty the div first before adding elements (using append()) That's why $('#grid_container').html(""); is used to clear the existing grid if there is one.

Answer 2

The $('#grid_container').html(""); with will clear whatever it is inside #gridcontainer.

Append will not clear anything, it just adds another element to the end of the container.

Answer 3

Here is the documentation :

.html()
.append()