DOM节点的创建、插入、删除等经验集合

青旅半醒 2021-07-24 11:31 368阅读 0赞

**目录**

DOM节点的创建、插入、删除各种经验集合

一、DOM节点的创建

1.1 JS方法

1.1.1 HTML页面中：

1.1.2 JS页面中

1.2 JQ方法

二、DOM节点的插入

2.1 DOM内部插入

2.2 DOM外部插入

三、DOM节点的删除

--------------------

# DOM节点的创建、插入、删除各种经验集合 #

## 一、DOM节点的创建 ##

主要流程和涉及的方法

*  创建节点   ：createElement
 *  设置属性  ：setAttribute
 *  加入到目的地：append、appendTo、appendChild……

## 1.1 JS方法 ##

### 1.1.1 HTML页面中： ###

style样式标签中：

script标签中：

//创建2个div元素
                var rightdiv = document.createElement('div')
               
                //给2个div设置不同的属性
                rightdiv.setAttribute('class', 'right')  //设置class为right
              
                rightaaron.innerHTML = "动态创建DIV元素节点";
                   
                   //绘制到页面body
                   body.appendChild(rightdiv)

### 1.1.2 JS页面中 ###

var LegendDIV=document.createElement("div");
                LegendDIV.id="legendContainer";
                LegendDIV.style.backgroundColor ="#FFFFFF";
                LegendDIV.style.width="100px";
                LegendDIV.style.height="320px";
                LegendDIV.style.position="absolute";
                LegendDIV.style.top='520px';
                LegendDIV.style.left="85%";
                //LegendDIV.style.border="1px groove DodgerBlue";
                LegendDIV.style.backgroundColor='rgba(255,255,255,0)'
                LegendDIV.style.display="block";
                document.body.appendChild(LegendDIV);

## 1.2 JQ方法 ##

创建元素节点：

var  div  =$("<div></div>")

创建文本节点

var  textDiv=$("<div>我是文本节点</div>")

创建带属性的复杂节点

var  html=$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    var  html=$("<div style='color:red'><div class='aaron'>动态创建DIV元素节点</div></div>")

## 二、DOM节点的插入 ##

备注：所有节点的插入，前面、后面的概念是style设置上下左右的参照点

### 2.1 DOM内部插入 ###

A.append(B):B插入A内部后面

A.appendTo(B):：A插入到B内部后面

A.prepend(B):B插入到A内部前面

A.prepend(B):A插入到B内部前面

### 2.2 DOM外部插入 ###

外部插入，两个元素是兄弟之间的平级关系

A.after(B)：支持多参数，以逗号隔开，可以一次插入几个元素，向元素A外部后面添加元素B，AB

A.before(B):支持多参数，向元素A的外部前面添加B元素，BA

A.insertAfter(B)：不支持多参数，A元素插入到指定元素B的内部后面，如果指定元素B后面本来就有元素C了，即BC那将本来后面的元素后移，BAC