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代码后的页面效果