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>
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS動(dòng)態(tài)創(chuàng)建元素的兩種方法
- JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
- JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
- js 動(dòng)態(tài)創(chuàng)建 html元素
- js實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建的元素綁定事件
- javascript與jquery動(dòng)態(tài)創(chuàng)建html元素示例
- 淺析JS動(dòng)態(tài)創(chuàng)建元素【兩種方法】
- JS中動(dòng)態(tài)添加事件(綁定事件)的代碼
- javascript下給元素添加事件的方法與代碼
- javascript 動(dòng)態(tài)添加事件代碼
- js實(shí)現(xiàn)為a標(biāo)簽添加事件的方法(使用閉包循環(huán))
- JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例
相關(guān)文章
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過(guò)本文給大家介紹Javascript的表單驗(yàn)證長(zhǎng)度，需要的朋友參考下吧2016-03-03
JavaScript面試出現(xiàn)頻繁的一些易錯(cuò)點(diǎn)整理
通過(guò)幾個(gè)常見(jiàn)面試開(kāi)始,討論針對(duì)一個(gè)題目的分析思路，就有了下面這篇文章，本文主要給大家整理總結(jié)介紹了關(guān)于JavaScript面試中會(huì)頻繁出現(xiàn)的一些易錯(cuò)點(diǎn)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2018-03-03
今天小編就為大家分享一篇layui的layedit富文本賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Javascript? Constructor構(gòu)造器模式與Module模塊模式
這篇文章主要介紹了Javascript? Constructor構(gòu)造器模式與Module模塊模式，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
js導(dǎo)入導(dǎo)出excel(實(shí)例代碼)
這篇文章主要是對(duì)js導(dǎo)入導(dǎo)出excel的實(shí)例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript實(shí)現(xiàn)購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
ajax跨域調(diào)用webservice的實(shí)現(xiàn)代碼
這篇文章主要介紹了 ajax跨域調(diào)用webservice服務(wù)例子和理解，最近ajax訪問(wèn)webservice遇到跨域的問(wèn)題，網(wǎng)上搜索資料，總結(jié)如下2016-05-05
只需五句話搞定JavaScript作用域(經(jīng)典)
javascript作用域是前端開(kāi)發(fā)比較難理解的知識(shí)點(diǎn)，下面小編給大家提供五句話幫助大家很快的了解js作用域，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
這篇文章主要介紹了ExtJs異步無(wú)法向外傳值和賦值的完美解決辦法,需要的朋友可以參考下2017-06-06
js中使用replace方法完成某個(gè)字符的轉(zhuǎn)換
這篇文章主要介紹了js中使用replace方法完成某個(gè)字符的轉(zhuǎn)換,比較實(shí)用，需要的朋友可以參考下2014-08-08