dom节点操作（节点的创建与追加、删除与替换节点的方法。）

一、创建与追加节点

创建节点: document.creatElement(“”)
追加节点:document.appendChild(“”)
插入节点:document.insertBefore(“”,“”)
删除节点:
tag.remove()
父元素.removeChild(tag)
替换节点:
父元素.replaChild(替换，被替换)

<script>//1、创建节点var _ul=document.createElement("ul");//2、将ul追加到bodydocument.body.appendChild(_ul);//3、动态追加10个lifor (var i = 0; i <10; i++) {//创建li节点var _li=document.createElement("li");//给li添加内容_li.innerText="奇酷教育";//将li追加到ul中_ul.appendChild(_li);}//4、加一条评论var _li2=document.createElement("li");_li2.innerText="奇酷教育就是好";//5、将_li2插入到第一个li之前_ul.insertBefore(_li2,_ul.firstElementChild)</script>

输出结果：

二、删除与替换节点

html代码:

 <div class="wrapper"><p>111111</p><p>222222</p><p>333333</p></div>

单html时页面结果：

js代码：

//获取wrapper父元素var _wrapper=document.querySelector(".wrapper");//获取第一个p元素var _firstP=_wrapper.firstElementChild;/* 删除节点父元素.removeChild(子元素)子元素.remove() */_wrapper.removeChild(_firstP);// _firstP.remove();//替换节点//获取最后一个p元素var _lastP=_wrapper.lastElementChild;//创建新节点var _span=document.createElement("span");_span.innerText="奇酷教育";// 替换节点:父元素.replaceChild(替换节点,被替换节点)_wrapper.replaceChild(_span,_lastP)

写入js代码后的页面效果

dom节点操作（节点的创建与追加、删除与替换节点的方法。）相关推荐

R操作MySQL数据库创建表、删除表、增删改查（CRUD）
R操作MySQL数据库创建表.删除表.增删改查(CRUD) 关系数据中的数据是按照一定范式去存储的.当我们需要非常高级和复杂的Sql查询就可以使用关系数据库的数据资产.不光java和python可以容 ...
js添加、删除、替换节点
1.添加几个按钮 <button onclick="add()">添加</button>/*onclick是鼠标事件,当鼠标单击时执行脚本*/<but ...
Arcgis实例操作20--线分割面数据、删除线多余节点、提取点群最小边界几何
1.如何用线要素对面要进行素分割?(更方便的方法,建议使用) 1)加载分割面工具. 打开[菜单栏]|[自定义]|[自定义模式]对话框,选择[命令]|[拓扑]|[分割面工具],将其拖动至任意工具条内后释 ...
删除链表最小节点c语言,最简单的链表删除第一个节点时释放内存的问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 1 #include 2 #include "list.h" 3 4 int IsEmpty(List L) 5 { 6 r ...
第四章 DOM节点操作
1.什么是DOM: DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类: (1)Core Dom:可以对ht ...
html dom节点取父节点,JavaScript DOM父子兄节点操作必看详解
首先我们知道网页中的所有内容都是节点(标签.属性.文本.注释等) ,之前我们已经说过了一些元素的获取方法比如element.getElementById(),element.querySelecto ...
DOM节点操作大全(一)
下面是对DOM节点操作的整理,有创建节点.插入节点.删除节点.复制节点希望可以帮助到有需要的小伙伴哦在下一篇博客小编会整理DOM节点属性的知识点文章目录创建节点插入节点删除节点复制节点 ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
016_Redis集群的删除和添加节点
1. 集群操作命令 1.1. 查看集群命令 1.2. create创建一个集群. 1.3. add-node添加一个节点到集群. 1.4. reshard分片. 1.5. del-node移除一个节点 ...

dom节点操作（节点的创建与追加、删除与替换节点的方法。）

一、创建与追加节点

二、删除与替换节点

dom节点操作（节点的创建与追加、删除与替换节点的方法。）相关推荐

最新文章

热门文章