简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

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

不言
发布： 2018-12-28 17:35:09
原创
6268 人浏览过

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中文网其他相关文章！

相关标签：
append方法
来源：php.cn
上一篇：如何使用Node.js创建模块（module） 下一篇：如何使用jQuery更改CSS样式
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
来自于 2024-04-06 21:28:37
0
1
2257
数独检查器无法工作？谁能帮我识别错误？ 我尝试了在线编辑器上的所有方法，但仍然收到错误。但当我在我的机器上的VSCode上执行此操作时，它工作正常。我很困惑，在没有发现错误的情况下无法提交代码。我不知道该去哪里寻找了。我...
来自于 2024-04-06 21:21:07
0
1
474
解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
来自于 2024-04-06 20:22:15
0
1
454
如何在 livewire 惰性占位符中使用 laravel 组件 我想在livewire3占位符内添加我的laravel组件的骨架到目前为止我已经尝试过：通过包含Laravel组件来实现Livewire类：publicfunctionplaceh...
来自于 2024-04-06 20:02:10
0
2
543
使用MySQL SQL查询计算另一张表中字段的总和 我有一个这样的模式：具有属性“user_id”和“username”的用户表以及具有属性“customer_id”（user_id的FK）和“finalPrice”的订单表数据库架...
来自于 2024-04-06 19:39:29
0
1
441
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！