添加节点

appendChild

语法:parent.appendChild(child)

parent: 调用者,父节点来调用

child:需要添加的那个孩子。

作用:把child添加到parent的孩子的最后面。

var demo = document.getElementById("demo");

var box = document.getElementById("box");

box.appendChild(demo);

insertBefore

语法:parent.appendChild(child)

parent: 调用者,父节点来调用

child:需要添加的那个孩子。

作用:把child添加到parent的孩子的最后面。

var ul = document.getElementById("list");

var li = document.createElement("li");

li.innerHTML = "骥骥";

//就是添加到子节点的最前面。

ul.insertBefore(li, ul.children[0]);

克隆节点

语法:var newNode = node.cloneNode(deep)

功能:在内存中克隆一份节点

参数:deep

false:默认值:是浅复制,只会复制标签,节点本身,不会复制节点的孩子。

true:深度复制,会复制标签,还会复制标签的所有内容 --- 常用

克隆出来的节点跟原来的节点没有关系了,修改了也不会相互影响。

如果克隆的节点带了id,我们需要给id重新设置一个值,不让id冲突

删除节点

语法:parent.removeChild(child);

功能:由父盒子调用,删除里面的一个子元素。

【案例:祝愿墙】 ---  ondblclick:双击的时候触发

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容