每個載入瀏覽器的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這個變數快速定位元素及獲取元素的內容，頁面資料處理時，為我們提供了便利。