javascript中createElement的兩種創(chuàng)建方式

更新時(shí)間：2015年05月14日 09:37:41 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(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 = "用戶名:";
  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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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