document.appendChild踩的坑的思考
问题描述
又在练习贪吃蛇的小例子，但插入节点的时候遇到问题了。
为啥说“又”，因为之前写过，但是因为是用jquery写的，这次想要用原生的写，果然又出问题了。
所有编程还得多练，不然真的要出问题。多练，亲自打出来，技术才能进步，印象才能深刻。
过程
先看以下代码：
this.snake.forEach(item => {
console.log(item);
// 创建元素
let span = document.createElement('span');
if (item.head) { // 是头的话
span.classList.add('snake-head');// 添加class
} else {
span.classList.add('snake-body');
}
span.style.top = item.top + 'px';
span.style.left = item.left + 'px';
console.log(span);
this.game_container.appendChild(span);
console.log(this.game_container);
})很简单，解决办法就是循环遍历，在内部定义一个局部变量，然后插入就行了。
appendChild()的定义是
将一个节点插入到指定的父节点的最末尾处(也就是成为了这个父节点的最后一个子节点)。appendChild 方法会把要插入的这个节点引用作为返回值返回。如果被插入的节点已经存在于当前文档的文档树中，则那个节点会首先从原先的位置移除，然后再插入到新的位置，也就是同样的节点在文档中只会出现一次。
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置。
原来，如下图
插入贪吃蛇节点
现在，如下图
成功插入子节点appendChild
嗯，我的基础知识不扎实，没办法，只能多练。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录