当前位置:Gxlcms > JavaScript > 如何使用jQuery中append方法添加元素

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

时间:2021-07-01 10:21:17 帮助过:89人阅读

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

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

以上就是如何使用jQuery中append方法添加元素的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行