DOM 操作範例

下拉式選單

要在 select 或是 dropdown 元件中加入新的項目：

optionItem = new option(text, value, defaultSelected,
                         selected)

或是

  var opt = document.createElement(‘option’);
  opt.value=value;
  opt.text=text;
  select.options.add(opt, index);

動態建立表格

下面的程式碼示範如何取得表格目前的列數（row）。
若是表格目前沒有任何一列，則設定為 0。

   var lastRow = tbl.rows.length;
   var row = tbl.insertRow(lastRow);
   var cellLeft = row.insertCell(0);

接著下面示範如何動態加入表格內容：

  var totalRows='1'; //假設要完成的總列數為 1 列
  var totalCols='2'; //            總行數為 2 行
  var intRow;
  var intCol;
  for(intRow=0;intRow<totalRows;intRow++)
  {
     var row = tbl.insertRow(intRow);
     for(intCol=0;intCol<totalCols;intCol++)
     {
        var cellLeft = row.insertCell(intCol);
     }
  }

TextArea

下面示範如何動態建立一個文字區塊，並設定列數和行數

  var sample=document.getElementById('sample');
  var el = document.createElement('textarea');
  el.id="sample";
  el.rows=20; // 列數
  el.cols=20; // 行數
  el.style.backgroundColor="#FFFFFF";
  el.style.width="120px" ;
  el.style.height="120px";
  sample.appendChild(el);

動態加入文字

利用 text node 來加入文字內容：

 var textNode = document.createTextNode('hi');
 document.appendChild(textNode);