HTML页面元素的添加与删除

每个载入浏览器的HTML文档都会成为Document对象。

Document对象使我们可以从脚本(JavaScript)中对HTML页面中的所有元素进行访问。

创建一个div。

// 创建一个div.
var div = document.createElement("div");
// 设置div的属性-class.
div.setAttribute("class","add_info_wrap");
// 设置div的属性id.
// x为变量，每个div的id是唯一的，这样便于我们定位与操作div.
div.setAttribute("id","div_id_" + x);

创建一个label。

// 创建一个label.
var label = document.createElement("label");
// 设置label的属性-id.
label.setAttribute("id", "label_id_" + x);
// 设置label的属性-class.
label.setAttribute("class", "fl");
// 设置label的内容-innerHTML.
label.innerHTML = "股东类型";

创建一个select，并为其添加option。

// 创建一个select。
var select = document.createElement("select");
// 设置select的属性-id.
// x为变量，便于定位与操作select.
select.setAttribute("id", "select_id_" + x);
// 创建一个option。
var option = document.createElement("option");
// 设置option的属性-value.
option.setAttribute("value", "SHAREHOLDERS_CERT_TYPE_01");
// 设置option的内容-innerHTML.
option.innerHTML = "居民身份证";
// select追加子元素option.
select.appendChild(option );

创建好的div，我们为其添加子元素，删除子元素的方法。

// 添加子元素-label.
div.appendChild(label);
// 删除子元素-label.
var label = document.getElementById("label_id_" + x);
div.removeChild(label);
// 如果不知道label的父级元素，可以通过下面的方法进行删除。
label.parentNode.removeChild(label);

// 添加子元素-select.
div.appendChild(select);
// 删除子元素-select.
var select = document.getElementById("select_id_" + x);
div.removeChild(select);
// 如果不知道select的父级元素，可以通过下面的方法进行删除。
select.parentNode.removeChild(select);

注意：x为变量，当我们为其创建好唯一的id时，这时的id是我们以约定好的规则命名的，将x这个变量保存在一个一维数组中。

var x = 1;

var x_array = new Array();

x_array[0] = 1;

新增时 ++x , x_array.push(x);，删除时x_array.remove(x);

这样做，是为了我们可以根据x这个变量快速定位元素及获取元素的内容，页面数据处理时，为我们提供了便利。