document.appendChild踩的坑的思考

无道 2019-08-07 0 条评论 编程相关 阅读286 手机阅读

问题描述

又在练习贪吃蛇的小例子,但插入节点的时候遇到问题了。

为啥说“又”,因为之前写过,但是因为是用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 10:20
这篇文章还没有评论呢~
点击刷新/生成验证码