javascript中createElement的兩種創(chuàng)建方式
本文實(shí)例講述了javascript中createElement的兩種創(chuàng)建方式。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement的兩種創(chuàng)建方式</title> <script type="text/javascript"> function CreateButton1() { var btn = document.createElement("input"); btn.type = "button"; btn.value = "我是動(dòng)態(tài)創(chuàng)建的1"; btn.onclick = function () { alert(this.value); } document.body.appendChild(btn); } function CreateButton2() { var btn = document.createElement("<input type='button' value='我是動(dòng)態(tài)創(chuàng)建的2' "+"onclick='OnClick2(this)' />"); document.body.appendChild(btn); } function OnClick2(btn) { alert(btn.value); } function CreateLink() { var link = document.createElement("<a ); //注意這里鏈接的文本“百度”是不會(huì)顯示出來(lái)的, //必須設(shè)置innerText或innerHTML link.innerText = "百度"; document.body.appendChild(link); } function CreateLabel() { var lbl = document.createElement("label"); lbl.setAttribute("for", "userName"); lbl.setAttribute("myAge", "12"); //可以設(shè)置自定義標(biāo)示 lbl.innerText = "用戶(hù)名:"; document.body.appendChild(lbl); } </script> </head> <body> <input type="button" value="動(dòng)態(tài)創(chuàng)建按鈕1" onclick="CreateButton1()" /> <input type="button" value="動(dòng)態(tài)創(chuàng)建按鈕2" onclick="CreateButton2()" /> <input type="button" value="動(dòng)態(tài)創(chuàng)建鏈接" onclick="CreateLink()" /> <input type="button" value="動(dòng)態(tài)創(chuàng)建Label" onclick="CreateLabel()" /> <input type="text" id="userName" value="李莫" /> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- vue.js中created方法作用
- 詳解Nodejs 通過(guò) fs.createWriteStream 保存文件
- 淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL
- javascript輕量級(jí)庫(kù)createjs使用Easel實(shí)現(xiàn)拖拽效果
- js動(dòng)態(tài)生成Html元素實(shí)現(xiàn)Post操作(createElement)
- node.js中的fs.createReadStream方法使用說(shuō)明
- node.js中的http.createServer方法使用說(shuō)明
- javascript如何實(shí)現(xiàn)create方法
相關(guān)文章
關(guān)于json字符串與實(shí)體之間的嚴(yán)格驗(yàn)證代碼
在一個(gè)項(xiàng)目中要求嚴(yán)格驗(yàn)證傳入的json字符串與定義的 類(lèi)匹配,否則不記錄。后來(lái)查了好多資料才弄明白,下面小編給大家分享下關(guān)于json字符串與實(shí)體之間的嚴(yán)格驗(yàn)證,感興趣的朋友一起看看吧2016-11-11JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02js動(dòng)態(tài)設(shè)置div的值下例子
設(shè)置div的值想必大家都會(huì)吧,按要說(shuō)動(dòng)態(tài)設(shè)置想必知道的人及寥寥無(wú)幾了,下面有個(gè)不錯(cuò)的示例,希望對(duì)大家有所幫助2013-10-10JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果,通過(guò)簡(jiǎn)單的JavaScript頁(yè)面元素遍歷及樣式操作實(shí)現(xiàn)下拉菜單效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09javascript禁止訪客復(fù)制網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁(yè)內(nèi)容的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08BootStrap tab選項(xiàng)卡使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap tab選項(xiàng)卡使用小結(jié),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法,涉及JavaScript針對(duì)時(shí)間及狀態(tài)欄操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10