创建画板：.html（）和.append（）之间的区别？(Creating sketchpad: difference between .html() and .append()?)

创建画板：.html（）和.append（）之间的区别？(Creating sketchpad: difference between .html() and .append()?)

我正在“复制” 这个草图项目 ， 该项目旨在用X×X方格填充页面。 为了做到这一点，我必须创建一个div容器（用X方块填充），然后继续使用.append()添加X div容器。

创建（比方说）16x16方格时，草图显示完美。 但是，当我尝试创建64x64时，草图板的第一行，几行仅部分填充。

看看这个问题，我注意到JS文件（ github ），我知道这行代码有帮助，但我不知道为什么：

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

换句话说，为什么.append()足以用于较小的草图，但不适用于较大的草图？

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?

最满意答案

$('#grid_container').html("")第一次不需要$('#grid_container').html("")因为div已经为空。 但是，当您单击另一个按钮时，其目的是创建一个全新的网格。 所以你想在添加元素之前先清空div（使用append() ）这就是为什么$('#grid_container').html(""); 用于清除现有网格（如果有）。

$('#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.