• 技术文章 >web前端 >前端问答

    javascript怎样点击增加盒子

    长期闲置长期闲置2022-01-19 10:40:40原创252

    方法:1、给按钮元素绑定click点击事件,并指定事件处理函数;2、在事件处理函数中利用append()方法实现点击添加盒子效果,语法为“指定元素对象.append(" 插入进来的盒子元素");”。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    javascript怎样点击增加盒子

    append() 方法在被选元素的结尾插入指定内容。

    语法为:

    $(selector).append(content,function(index,html))

    其中参数如下:

    03.png

    示例如下:

    <html>
    <head>
    <meta charset="utf-8">
    <title>123</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").append(" <div>这是一个插入进来的div</div>");
    });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
    <button id="btn1">在段落后添加一个div</button>
    </body>
    </html>

    输出结果:

    04.png

    点击按钮后:

    05.png

    相关推荐:javascript学习教程

    以上就是javascript怎样点击增加盒子的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 前端 html
    上一篇:javascript中且是哪个符号 下一篇:JavaScript中怎样利用for求和
    千万级数据并发解决方案

    相关文章推荐

    • javascript基于什么标准• javascript数字怎么取绝对值• 十分钟带你了解JavaScript的继承• javascript怎么实现鼠标悬停变色效果• JavaScript怎么改变网页背景颜色
    1/1

    PHP中文网