append方法是一种可以动态添加html元素的方法,使用append方法非常方便,你可以在添加任意多少行html元素,本篇文章我们就来介绍关于append方法添加元素的方法。
如何使用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方法并增加元素数量。
在浏览器上显示效果如下
当点击button按钮时,每点击一下就会出现一个内容,点击五下的效果如下:
本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网相关教程栏目!!!
以上是如何使用jQuery中append方法添加元素的详细内容。更多信息请关注PHP中文网其他相关文章!