document.createElement()以文找文 @ 網頁程式 - coke750101™ :: 隨意窩 Xuite日誌
  • BlogAD
  • BloggerADs
  • 關鍵字
    1. 沒有新回應!
  • 人數即時統計
  • Google Analytics
  • Yahoo! 站長工具
  • 201004112322document.createElement()以文找文

    以下轉錄自:http://blog.yam.com/csylvia/article/23681942



    這是 DOM(Document Object Model)的應用之一,看來我對 DOM 技術還是很不熟稔啊~~(遠目)

    對高手 而言這是小兒科,但對我而言卻很新鮮,所以決定把相關資料放上來。


    會碰到這問題的原因之一,是要動態產生 <div> 元件,
    之前約略有印象,但印象很模糊,
    所 以還是上網查到如何新增一個 <div> 元件:

     

    1: var obj = document.createElement( "div" );

     

    新 增後要設定該元件的屬性:

     

    1: obj.id = "obj-ID";
    2: obj.className = "yyy";
    3: obj.style.position = "absolute";
    4: obj.style.left = x + "px";
    5: obj.style.top = y + "px";

     

    接著設定該元件的 event handler:

     

    1: obj.onclick = OnClickHandler;

     

    最後讓元件附著在網頁上顯示出來,也可以指定 append 到某個網頁元件上: 

     

    1: document.body.appendChild( obj );

     

    如果要刪除該元件則:

     

    1: var obj = document.getElementById( "obj-ID" );  
    2: document.body.removeChild( obj );

     

    這樣看下來其實也不會很難。

    值得 注意的是 <input> 元件,
    因為 <input> 元件包含了 text, button, checkbox 之類,
    所以設定部分特別不一樣,
    須以「type」屬性指定 <input> 類別,
    詳請可參考「document.createElement() 用法及注意事项 - Web UI Design - JavaEye技术网站」。

     

     1: <div id="board"></div>  
    2: <script type="text/javascript">
    3: <!--
    4: var board = document.getElementById("board");
    5: var e = document.createElement("input");
    6: e.type = "radio";
    7:
    8: var obj = board.appendChild(e);
    9: obj.checked = true;
    10: //e.checked = true; // this line is also correct
    11:
    -->
    12: </script>

     

    此外還需要注意的是,
    在 Netscape、Opera 和 Firefox 這些瀏覽器中,
    e.type」可以放在 appendChild() 之前或之後的地方;
    但在 IE 則「e.type」一定要放在其他所有屬性之前,
    也就是在 createElement() 之後就要緊接寫這一行才行。

     

     

     

    【Create 相關】

     

    【Event Handler 相關】

     

    【DOM 相關】

     

    【其他】

     

     


     

    【2009.10.26 補充】

    上述說到在新增的元件上加入 event handler 的方法,
    但這 只限於沒有參數的函式,
    如果要加入的是個需要傳參數的 event handler,
    寫法如下:

     

    1: td.onclick = Function( "alert('" + i + ", " + j + "');" );

     

    另 外還有一種寫法為 

     

    1: td.onclick = function() { alert(i + ", " + j); }

     

     這 種沒試過,但看起來沒問題~~ :)

     

     

    Javascript 操作se...|日誌首頁|Javascript sele...上一篇Javascript 操作select控制項大全(新增、修改、刪除、選中、清空、判斷存在等)...下一篇Javascript select option control...
    回應