Rumah > hujung hadapan web > tutorial js > 如何使用jQuery中append方法添加元素

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

不言
Lepaskan: 2018-12-28 17:35:09
asal
6335 orang telah melayarinya

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

jQuery

如何使用append方法?

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

在选择器中指定类和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>
Salin selepas log masuk

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

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

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

在浏览器上显示效果如下

jQuery

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

jQuery

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

Atas ialah kandungan terperinci 如何使用jQuery中append方法添加元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan