JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例講解

更新時(shí)間：2016年01月06日 16:27:52 作者：偽磚家

這篇文章主要介紹了JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例，

本文實(shí)例講解了JavaScript動(dòng)態(tài)創(chuàng)建div等元素的詳細(xì)代碼，分享給大家供大家參考，具體內(nèi)容如下

效果圖：

為了節(jié)省時(shí)間，就直接貼代碼了！

<html> 
  <head> 
  <title>js動(dòng)態(tài)創(chuàng)建div等元素實(shí)例</title> 
  <style type="text/css"> 
  </style> 
  </head> 
  <body> 
  <script language="javascript"> 
    var Test={ 
      createDiv:function(){ 
        var div = document.createElement('div'); 
        div.id="createDiv"; 
        div.style.cssText = 'border:1px solid red; width:200px; z-index:100; height:20px;'; 
        document.body.appendChild(div); 
      }, 
      appendDivChild:function(){ 
        var div = document.createElement('div'); 
        div.id="appendDivChild"; 
        div.style.cssText = 'border:1px solid green; width:400px; z-index:100; height:100px;'; 
        var childDiv= document.createElement('div'); 
        childDiv.id="childDiv"; 
        childDiv.style.cssText = 'border:2px solid gray; width:200px; z-index:100; height:50px;'; 
        div.appendChild(childDiv); 
        document.body.appendChild(div); 
      }, 
      createSelect:function(){ 
        var select=document.createElement('select'); 
        select.id="select"; 
        var option1=document.createElement('option'); 
        option1.value=1; 
        option1.text=1;//非ie,添加內(nèi)容 
        option1.innerHTML=1;//ie,添加內(nèi)容 
        select.appendChild(option1); 
        var option2=document.createElement('option'); 
        option2.value=2; 
        option2.text=2; 
        option2.innerHTML=2; 
        select.appendChild(option2); 
        var option3=document.createElement('option'); 
        option3.value=3; 
        option3.text=1; 
        option3.innerHTML=3; 
        select.appendChild(option3); 
        document.body.appendChild(select); 
      }, 
      createRadio:function(){ 
        var radio=document.createElement('input'); 
        radio.id='radio'; 
        radio.type="radio"; 
        radio.width="100"; 
        var label=document.createElement('label'); 
        label.text="男"; 
        label.innerHTML="男"; 
        document.body.appendChild(radio); 
        document.body.appendChild(label); 
      } 
    }; 
    Test.createDiv();//創(chuàng)建div 
    Test.appendDivChild();//為追加子div 
    Test.createSelect();//創(chuàng)建下拉框 
    Test.createRadio();//創(chuàng)建單選按鈕 
  </script> 
  <select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
  </select> 
  </body> 
</html>

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

bootstrap table單元格新增行并編輯
這篇文章主要為大家詳細(xì)介紹了bootstrap table單元格新增行并編輯的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript貪吃蛇小組件實(shí)例代碼
本文通過實(shí)例代碼給大家分享了JavaScript貪吃蛇小組件功能 ,需要的朋友可以參考下
2017-08-08
利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫
最近在工作中遇到一個(gè)需要，需要將數(shù)字實(shí)現(xiàn)遞增的動(dòng)態(tài)顯示，從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實(shí)現(xiàn)，suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化動(dòng)畫的相關(guān)資料，需要的朋友可以參考下。
2017-02-02
理解JavaScript的caller,callee,call,apply
文章挺好的，雖然我用的是jQuery，但感覺還是有些用的～～～
2009-04-04
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個(gè)簡單的加密來保護(hù)某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下
2023-07-07
如何用CocosCreator實(shí)現(xiàn)射擊小游戲
這篇文章主要介紹了如何用CocosCreator實(shí)現(xiàn)射擊小游戲，此游戲難度不大，僅作為入門的練手小游戲，一小時(shí)就能完成，里面用到的知識(shí)很常用，喜歡游戲的同學(xué)，可以參考下
2021-04-04
Javascript和Ajax中文亂碼吐血版解決方案
一般來說中文亂碼用js結(jié)合escape來解決，但下面的方法是一般后臺(tái)中的一些問題，需要注意下輸出順序，先聲明編碼類型在輸出內(nèi)容是個(gè)好習(xí)慣。
2009-12-12
JavaScript內(nèi)置對象math,global功能與用法實(shí)例分析
這篇文章主要介紹了JavaScript內(nèi)置對象math,global功能與用法,結(jié)合實(shí)例形式分析了javascript中內(nèi)置對象math與global的基本概念、功能及使用方法,需要的朋友可以參考下
2019-06-06
詳解cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案
這篇文章主要為大家介紹了cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JavaScript超詳細(xì)實(shí)現(xiàn)網(wǎng)頁輪播圖
這篇文章主要介紹了JavaScript超詳細(xì)實(shí)現(xiàn)網(wǎng)頁輪播圖,我們經(jīng)常會(huì)看到各種輪播圖的效果，它們到底是怎樣實(shí)現(xiàn)的呢？今天我們就一起來看一下具體實(shí)現(xiàn)方法吧
2021-12-12