JavaScript中的添加和删除操作

前言

  在JavaScript编程中我们经常会用到添加和删除操作，不仅是可以对元素进行直接操作，也可以对元素的属性进行操作。

一、添加操作

1. 在尾部插入元素

  在尾部插入元素是JavaScript中一个常用的DOM操作，在进行尾部插入元素的时候，我们需要先生成一个元素，使用createElement()方法，然后用appendChild()方法将元素插入到尾部。
用法案例如下：

  var oInput = document.createElement('input');
    oInput.type = 'button';
    oInput.value='我是一个小按钮';
    document.body.appendChild(oInput);

2. 在指定位置插入元素

  在指定位置插入元素也是JavaScript中的一个常用的DOM操作，在进行指定位置插入元素的时候，我们也是需要先生成一个元素，使用createElement()方法，然后用insertBefore()方法将元素插入到指定位置。
语法格式如下

insertBefore(要插入的元素，被插入的元素)
如：outNode.insertBefore(oDiv,div1)

用法案例如下：

var outNode=document.getElementById('outNode');
var Div=document.createElement('div');
Div.style.width='100px';
Div.style.height='100px';
Div.style.backgroundColor='#ff0000';
outNode.insertBefore(Div,div1);

3. 设置元素的行间属性

  我们不仅可以通过CSS样式来对元素设置属性，同样我们可以通过JavaScript来对元素设置属性，但是这时我们设置的属性为行间属性。需要使用setAttribute()方法。
语法格式如下：

setAttribute(属性，属性值);
eg: A.setAttribute(herf,‘http:wwww.baidu.com’)

用法案例如下：

var Div=document.getElementById('Div');
Div.setAttribute(class,'Div');

二、 删除操作

1. 删除元素的子元素

  当我们对元素进行操作的时候，我们不仅可以添加元素的子元素，同时我们还可以使用removeChild()方法来删除元素的子元素。
用法案例如下：

var UL=document,getElementById('UL');
var firstLi=document.getElementById('firstLi');
UL.removeChild(firstLi);

2. 删除元素本身

  我们不仅可以对元素进行删除子元素的操作，同时我们还可以对元素进行删除其本身的操作。需要使用remove()方法。
用法案例如下：

var UL=document,getElementById('UL');
var firstLi=document.getElementById('firstLi');
UL.firstLi.remove();

3. 删除元素的行间属性

  当我们对元素的行间属性进行操作的时候，我们不仅可以设置和获取元素的行间属性，同时我们还可以删除元素的行间属性，使用removeAttribute()方法。
用法案例如下：

removeAttribute(属性)
eg：	A.removeAttirbute('id');