欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript如何向頁面中添加一個按鈕

 更新時間：2023年10月11日 11:35:57   作者：我是星星bling  
這篇文章主要介紹了JavaScript如何向頁面中添加一個按鈕,使用兩種方式向頁面中添加一個按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

使用兩種方式向頁面中添加一個按鈕，分別是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ū)別：如果插入的元素比較簡單的話，兩個方法都可以使用，如果插入的元素比較復(fù)雜的話只能用innerHTML屬性來實現(xiàn)。

到此這篇關(guān)于JavaScript如何向頁面中添加一個按鈕的文章就介紹到這了,更多相關(guān)js頁面添加按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 用js的document.write輸出的廣告無阻塞加載的方法

    用js的document.write輸出的廣告無阻塞加載的方法

    這篇文章主要介紹了用js的document.write輸出的廣告無阻塞加載的方法,需要的朋友可以參考下
    2014-06-06
  • 9個javascript語法高亮插件 推薦

    9個javascript語法高亮插件 推薦

    語法高亮效果使用非常頻繁，特別是在博客里展示各種代碼的時候，可以讓代碼更易讀。我們身邊就有很多語法高亮的插件，其中大部分是用javascript寫的，也有一些是通過server端語言實現(xiàn)（比如Phyton或Ruby）。
    2009-07-07
  • Javascript模塊模式分析

    Javascript模塊模式分析

    javascritp模式講解全局變量是魔鬼。在YUI中，我們僅用兩個全局變量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO對象級的成員或這個成員作用域內(nèi)的變量。我們建議在你的應(yīng)用程序也使用類似的規(guī)則。
    2008-05-05
  • JavaScript檢測鼠標(biāo)移動方向的方法

    JavaScript檢測鼠標(biāo)移動方向的方法

    這篇文章主要介紹了JavaScript檢測鼠標(biāo)移動方向的方法,涉及javascript鼠標(biāo)操作的相關(guān)技巧,需要的朋友可以參考下
    2015-05-05
  • 解決javascript:window.close()在chrome,Firefox下失效的問題

    解決javascript:window.close()在chrome,Firefox下失效的問題

    本篇文章是對javascript:window.close()在chrome,Firefox下失效問題的解決方法進(jìn)行了分析介紹。需要的朋友參考下
    2013-05-05
  • JavaScript實現(xiàn)消息框示例

    JavaScript實現(xiàn)消息框示例

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)消息框示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • uni-app 支持多端第三方地圖定位的方法

    uni-app 支持多端第三方地圖定位的方法

    這篇文章主要介紹了uni-app 支持多端第三方地圖定位的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • 微信小程序WebSocket實現(xiàn)聊天對話功能

    微信小程序WebSocket實現(xiàn)聊天對話功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序WebSocket實現(xiàn)聊天對話功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • JS監(jiān)聽一個變量改變的兩種方法

    JS監(jiān)聽一個變量改變的兩種方法

    在業(yè)務(wù)中,由于項目采用微前端架構(gòu),需要通過A應(yīng)用的某個值的變化對B應(yīng)用中的DOM進(jìn)行改變（如彈出一個Modal）,第一個想到的可能是發(fā)布訂閱模式,其實不如將問題縮小化,采用原生的能力去解決,本文介紹了兩種方法來使用JS監(jiān)聽一個變量改變,需要的朋友可以參考下
    2023-11-11
  • JS實現(xiàn)處理時間，年月日，星期的公共方法示例

    JS實現(xiàn)處理時間，年月日，星期的公共方法示例

    這篇文章主要介紹了JS實現(xiàn)處理時間，年月日，星期的公共方法,結(jié)合實例形式分析了javascript日期時間的轉(zhuǎn)換、運算相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05

最新評論