首页 >web前端 >js教程 >如何使用jQuery中append方法添加元素

如何使用jQuery中append方法添加元素

不言
不言原创
2018-12-28 17:35:096320浏览

append方法是一种可以动态添加html元素的方法,使用append方法非常方便,你可以在添加任意多少行html元素,本篇文章我们就来介绍关于append方法添加元素的方法。

jQuery

如何使用append方法?

$(‘选择器’).append(‘添加的内容’);

在选择器中指定类和ID后,调用append并指定要添加的内容。

我们来看具体的示例

通过单击按钮在ul标签中添加li元素,代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function() {
        $("button").click(function() {
          $("ul").append("<li>添加的内容</li>");
        });
      });
    </script>
  </head>
  <body>
    <button>button</button>
    <ul>
    </ul>
  </body>
</html>

在单击按钮时创建一个要触发的事件,然后在其中执行append方法。

选择器编写一个append方法,指定ul标签并为该选择器添加li标签。

因此,每次按下按钮时,都会调用append方法并增加元素数量。

在浏览器上显示效果如下

jQuery

当点击button按钮时,每点击一下就会出现一个内容,点击五下的效果如下:

jQuery

本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网相关教程栏目!!!

以上是如何使用jQuery中append方法添加元素的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关文章

查看更多