JavaScript如何向頁(yè)面中添加一個(gè)按鈕
更新時(shí)間：2023年10月11日 11:35:57 作者：我是星星bling
這篇文章主要介紹了JavaScript如何向頁(yè)面中添加一個(gè)按鈕,使用兩種方式向頁(yè)面中添加一個(gè)按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
使用兩種方式向頁(yè)面中添加一個(gè)按鈕，分別是appendChild()和innerHTML屬性
appendChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.createElement("input");
oBtn.id = "btn";
oBtn.type = "button";
oBtn.value = "按鈕"
document.body.appendChild(oBtn);
}
</script>
</head>
<body>
</body>
</html>innerHTML屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.body.innerHTML = '<input id = "btn" type = "button" value = "按鈕" />';
}
</script>
</head>
<body>
</body>
</html>兩種方式的區(qū)別：如果插入的元素比較簡(jiǎn)單的話，兩個(gè)方法都可以使用，如果插入的元素比較復(fù)雜的話只能用innerHTML屬性來(lái)實(shí)現(xiàn)。
到此這篇關(guān)于JavaScript如何向頁(yè)面中添加一個(gè)按鈕的文章就介紹到這了,更多相關(guān)js頁(yè)面添加按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用js的document.write輸出的廣告無(wú)阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無(wú)阻塞加載的方法,需要的朋友可以參考下2014-06-06
語(yǔ)法高亮效果使用非常頻繁，特別是在博客里展示各種代碼的時(shí)候，可以讓代碼更易讀。我們身邊就有很多語(yǔ)法高亮的插件，其中大部分是用javascript寫的，也有一些是通過(guò)server端語(yǔ)言實(shí)現(xiàn)（比如Phyton或Ruby）。2009-07-07
javascritp模式講解全局變量是魔鬼。在YUI中，我們僅用兩個(gè)全局變量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO對(duì)象級(jí)的成員或這個(gè)成員作用域內(nèi)的變量。我們建議在你的應(yīng)用程序也使用類似的規(guī)則。2008-05-05
JavaScript檢測(cè)鼠標(biāo)移動(dòng)方向的方法
這篇文章主要介紹了JavaScript檢測(cè)鼠標(biāo)移動(dòng)方向的方法,涉及javascript鼠標(biāo)操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
解決javascript:window.close()在chrome,Firefox下失效的問(wèn)題
本篇文章是對(duì)javascript:window.close()在chrome,Firefox下失效問(wèn)題的解決方法進(jìn)行了分析介紹。需要的朋友參考下2013-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)消息框示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了uni-app 支持多端第三方地圖定位的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
微信小程序WebSocket實(shí)現(xiàn)聊天對(duì)話功能
這篇文章主要為大家詳細(xì)介紹了微信小程序WebSocket實(shí)現(xiàn)聊天對(duì)話功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JS監(jiān)聽(tīng)一個(gè)變量改變的兩種方法
在業(yè)務(wù)中,由于項(xiàng)目采用微前端架構(gòu),需要通過(guò)A應(yīng)用的某個(gè)值的變化對(duì)B應(yīng)用中的DOM進(jìn)行改變（如彈出一個(gè)Modal）,第一個(gè)想到的可能是發(fā)布訂閱模式,其實(shí)不如將問(wèn)題縮小化,采用原生的能力去解決,本文介紹了兩種方法來(lái)使用JS監(jiān)聽(tīng)一個(gè)變量改變,需要的朋友可以參考下2023-11-11
JS實(shí)現(xiàn)處理時(shí)間，年月日，星期的公共方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)處理時(shí)間，年月日，星期的公共方法,結(jié)合實(shí)例形式分析了javascript日期時(shí)間的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05