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è)置自定義標示
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)文章
這篇文章主要介紹了JS什么場景不適合箭頭函數(shù)，對箭頭函數(shù)感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)上傳照片代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)獲取和解析頁面內(nèi)容,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2025-03-03
本篇文章主要介紹了js彈窗返回值(window.open方式)。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了EXTJS7實現(xiàn)點擊拖拉選擇文本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
使用JavaScript字符串解決回文數(shù)的方案詳解
這篇文章主要介紹了使用JavaScript字符串解決回文數(shù)的方案,JavaScript中的字符串是一種數(shù)據(jù)類型,用于表示文本數(shù)據(jù),字符串可以包含任意字符序列,包括字母、數(shù)字、符號和空格,靈活掌握字符串的解決問題思想,巧用字符串解決回文數(shù),需要的朋友可以參考下2024-05-05
這篇文章介紹了javascript閉包的高級使用方法實例，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了小程序如何自主實現(xiàn)攔截器,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
詳解Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用
許多應(yīng)用程序中都會有日志模塊，用于記錄系統(tǒng)在運行過程中的一些關(guān)鍵信息，以便于對系統(tǒng)的運行狀況進行跟蹤。這篇文章給大家主要介紹了在Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用,需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了javascript文件加載管理簡單實現(xiàn)方法,可實現(xiàn)順序加載所有js文件的功能,非常簡單實用,需要的朋友可以參考下2015-07-07