每个载入浏览器的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这个变量快速定位元素及获取元素的内容,页面数据处理时,为我们提供了便利。