欢迎光临
我们一直在努力

JavaScript | 关于appendChild();无法添加元素问题

今天遇到一件很有意思的事,原因其实很简单,但上网搜了才找到原因。

我先获取到了ul,然后准备为其添加子节点,这时候发现虽然我使用appendChild(li),但实际运行时只成功的添加了一次。

var ul = document.getElementById("ul");
console.log(ulLi);  //返回11 (因为包括#text)
li = document.createElement("li");
ul.appendChild(li);
ul.appendChild(li);
ul.appendChild(li);

什么原因呢?百度知道一位网友的回答很有意思:

每次引用对象时,其实都是调用对象的内存地址,所以在循环中对一个对象添加多次,其实都是添加的同一个对象的内存地址,实际对象的数量并没有增加,就好比你对你女朋友连说六次爱你,不等于就有6个女朋友吧?所以必须在每次循环时都重新创建一个新的对象,这样系统就会为这个新对象分配新的内存空间,然后再添加到父元素中才算是真正的添加。

来自:百度知道

没错,正是地址引用的原因!我们为ul添加li时,都是对内存地址的添加,那么无论我们添加多少次,获得的结果都是添加一次!要解决这个问题,只需要创建一个循环,然后每次都在循环内重新声明要添加li对象

for(var i=0;i<3;i++){
    var li = document.createElement("li");
    ul.appendChild(li);
    ul.appendChild(li);
    ul.appendChild(li);
}

今天看百度知道的回答有笑到,敲代码真“美好”。

赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 关于appendChild();无法添加元素问题
分享到: 更多 (0)

评论 抢沙发

8 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏