javascript中createElement的兩種創(chuàng)建方式
更新時間：2015年05月14日 09:37:41 作者：永遠愛好寫程序
這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript中createElement的兩種創(chuàng)建方式。分享給大家供大家參考。具體實現(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 = "我是動態(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='我是動態(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 );
//注意這里鏈接的文本“百度”是不會顯示出來的，
//必須設(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 = "用戶名:";
document.body.appendChild(lbl);
}
</script>
</head>
<body>
<input type="button" value="動態(tài)創(chuàng)建按鈕1" onclick="CreateButton1()" />
<input type="button" value="動態(tài)創(chuàng)建按鈕2" onclick="CreateButton2()" />
<input type="button" value="動態(tài)創(chuàng)建鏈接" onclick="CreateLink()" />
<input type="button" value="動態(tài)創(chuàng)建Label" onclick="CreateLabel()" />
<input type="text" id="userName" value="李莫" />
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
關(guān)于json字符串與實體之間的嚴(yán)格驗證代碼
在一個項目中要求嚴(yán)格驗證傳入的json字符串與定義的 類匹配，否則不記錄。后來查了好多資料才弄明白，下面小編給大家分享下關(guān)于json字符串與實體之間的嚴(yán)格驗證，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了JS實現(xiàn)“全選”和"全不選"功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
設(shè)置div的值想必大家都會吧，按要說動態(tài)設(shè)置想必知道的人及寥寥無幾了，下面有個不錯的示例，希望對大家有所幫助2013-10-10
JS+CSS實現(xiàn)簡單的二級下拉導(dǎo)航菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)簡單的二級下拉導(dǎo)航菜單效果,通過簡單的JavaScript頁面元素遍歷及樣式操作實現(xiàn)下拉菜單效果,非常簡單實用,需要的朋友可以參考下2015-09-09
javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了BootStrap tab選項卡使用小結(jié)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS實現(xiàn)左右無縫輪播圖代碼的相關(guān)資料,小編看本段代碼非常不錯，具有參考借鑒價值，特此分享腳本之家平臺，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了基于js實現(xiàn)抽紅包并分配代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JS實現(xiàn)瀏覽器狀態(tài)欄顯示時間的方法,涉及JavaScript針對時間及狀態(tài)欄操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Javascript操作表單實例講解（下）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06