脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js页面添加按钮

JavaScript如何向页面中添加一个按钮

 更新时间：2023年10月11日 11:35:57   作者：我是星星bling  
这篇文章主要介绍了JavaScript如何向页面中添加一个按钮,使用两种方式向页面中添加一个按钮,分别是appendChild()和innerHTML属性,本文结合示例代码介绍的非常详细,需要的朋友可以参考下

使用两种方式向页面中添加一个按钮，分别是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>

两种方式的区别：如果插入的元素比较简单的话，两个方法都可以使用，如果插入的元素比较复杂的话只能用innerHTML属性来实现。

到此这篇关于JavaScript如何向页面中添加一个按钮的文章就介绍到这了,更多相关js页面添加按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能，现在无需服务器即可实现小程序的快速迭代，感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • 基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

    基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

    昨天到今天上午都在查一个IE的bug，情形如下：通过异步请求获取json数据，然后拼接成html代码，最后使用innerHTML类似方法插入到文档流中。在chrome下和IE8\9下均表现正常。结果已进入IE7，浏览器就崩溃，更别提IE6了，也是一副死给你看的样子。于是我就把这个bug定位于IE6\7，其实这时候我已经陷入了这个固定思维模式中，浪费了不少时间
    2013-05-05
  • js replace正则表达式应用案例讲解

    js replace正则表达式应用案例讲解

    js replace与正则表达式结合，可以有效发挥replace的功效，可以帮助用户解决替换中的复制问题，接下来详细介绍使用方法，感兴趣的朋友可以了解下
    2013-01-01
  • 详解ES6之async+await 同步/异步方案

    详解ES6之async+await 同步/异步方案

    这篇文章主要介绍了详解ES6之async+await 同步/异步方案，本文以最简明的方式来疏通 async + await，有兴趣的可以了解下
    2017-09-09
  • javascript实现的颜色块滑动的动态效果

    javascript实现的颜色块滑动的动态效果

    javascript实现的颜色块滑动的动态效果...
    2007-08-08
  • Javascript立即执行函数(IIFE)实例详解

    Javascript立即执行函数(IIFE)实例详解

    IIFE全拼Imdiately Invoked Function Expression,是一个在定义的时候就立即执行的JavaScript函数,这篇文章主要给大家介绍了关于Javascript立即执行函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • javascript实现禁止复制网页内容

    javascript实现禁止复制网页内容

    这篇文章主要介绍了javascript实现禁止复制网页内容,需要的朋友可以参考下
    2014-12-12
  • JS中append字符串包含onclick无效传递参数失败的解决方案

    JS中append字符串包含onclick无效传递参数失败的解决方案

    这篇文章主要介绍了JS中append字符串包含onclick无效传递参数失败的解决方案,需要的朋友可以参考下
    2016-12-12
  • asp错误 '80040e21' 多步 OLE DB 操作产生错误

    asp错误 '80040e21' 多步 OLE DB&nbs

    今天在写asp入库操作的时候提示Microsoft OLE DB Provider for ODBC Drivers 错误 80040e21 多步 OLE DB 操作产生错误，请检查每个 OLE DB 状态值，经测试时函数定义文件没有加载导致类型不对，所以无法入库
    2023-05-05
  • javascript脚本调试方法小结

    javascript脚本调试方法小结

    相信大家试过编写javascript脚本时发生这样或那样的错误，但是js并没有很好的调试方法，在这里介绍两个方法。
    2008-11-11

最新评论