JavaScript如何向頁面中添加一個(gè)按鈕
使用兩種方式向頁面中添加一個(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ū)別:如果插入的元素比較簡單的話,兩個(gè)方法都可以使用,如果插入的元素比較復(fù)雜的話只能用innerHTML屬性來實(shí)現(xiàn)。
到此這篇關(guān)于JavaScript如何向頁面中添加一個(gè)按鈕的文章就介紹到這了,更多相關(guān)js頁面添加按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序首頁的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解
這篇文章主要介紹了微信小程序首頁的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解,微信宣布了微信小程序開發(fā)者工具新增“云開發(fā)”功能,現(xiàn)在無需服務(wù)器即可實(shí)現(xiàn)小程序的快速迭代,感興趣的朋友跟隨小編一起看看吧2018-09-09
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug,情形如下:通過異步請(qǐng)求獲取json數(shù)據(jù),然后拼接成html代碼,最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7,瀏覽器就崩潰,更別提IE6了,也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7,其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中,浪費(fèi)了不少時(shí)間2013-05-05
js replace正則表達(dá)式應(yīng)用案例講解
js replace與正則表達(dá)式結(jié)合,可以有效發(fā)揮replace的功效,可以幫助用戶解決替換中的復(fù)制問題,接下來詳細(xì)介紹使用方法,感興趣的朋友可以了解下2013-01-01
詳解ES6之a(chǎn)sync+await 同步/異步方案
這篇文章主要介紹了詳解ES6之a(chǎn)sync+await 同步/異步方案,本文以最簡明的方式來疏通 async + await,有興趣的可以了解下2017-09-09
javascript實(shí)現(xiàn)的顏色塊滑動(dòng)的動(dòng)態(tài)效果
javascript實(shí)現(xiàn)的顏色塊滑動(dòng)的動(dòng)態(tài)效果...2007-08-08
Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁內(nèi)容
這篇文章主要介紹了javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁內(nèi)容,需要的朋友可以參考下2014-12-12
JS中append字符串包含onclick無效傳遞參數(shù)失敗的解決方案
這篇文章主要介紹了JS中append字符串包含onclick無效傳遞參數(shù)失敗的解決方案,需要的朋友可以參考下2016-12-12
asp錯(cuò)誤 '80040e21' 多步 OLE DB&nbs
今天在寫asp入庫操作的時(shí)候提示Microsoft OLE DB Provider for ODBC Drivers 錯(cuò)誤 80040e21 多步 OLE DB 操作產(chǎn)生錯(cuò)誤,請(qǐng)檢查每個(gè) OLE DB 狀態(tài)值,經(jīng)測試時(shí)函數(shù)定義文件沒有加載導(dǎo)致類型不對(duì),所以無法入庫2023-05-05

