Get the App
SLTechnology News&Howtos  ›  Development  › 

How to add a li element to jquery

Shulou Source: shulou.com Published: 2022-05-31 20:08:32 10月01日 Update

这篇文章主要介绍了jquery如何增加一个li元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何增加一个li元素文章都会有所收获,下面我们一起来看看吧。

增加li元素的方法:1、用"$("ul").append(li元素)";2、用"$(li元素).appendTo("ul")";3、用"$("ul").prepend(li元素)";4、用"$(li元素).prependTo("ul")"。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

增加一个li元素,就是在ul元素内部添加一个子元素li。

而jquery中,有4种添加子元素的方法:

append()和appendTo():向所选元素内部的"末尾处"插入内容

prepend( )和prependTo( ):向所选元素内部的"开始处"插入内容

方法1:使用append()方法

在 jQuery 中,我们可以使用 append( ) 方法向所选元素内部的"末尾处"插入内容。

语法:

$(A).append(B)

表示往 A 内部的末尾处插入 B。

示例:

$(function () { $("#btn").click(function () { var $li = "香蕉"; $("ul").append($li); }) }) 苹果 梨子 橘子

方法2:使用appendTo()方法

在 jQuery 中,appendTo( ) 和 append( ) 这两个方法功能虽然相似,都是向所选元素内部的"末尾处"插入内容,但是两者的操作对象是颠倒的。

语法:

$(A).appendTo(B)

表示将 A 插入到 B 内部的末尾处。

示例:

$(function () { $("#btn").click(function () { var $li = "榴莲"; $($li).appendTo("ul"); }) })

方法3:使用prepend( )

prepend( ) 方法向所选元素内部的"开始处"插入内容。

语法:

$(A).prepend(B)

表示往 A 内部的开始处插入 B。

示例:

$(function () {$("#btn").click(function () { var $li = "榴莲"; $("ul").prepend($li);})})

方法3:使用prependTo( )

prependTo( ) 和 prepend( ) 这两个方法功能虽然相似,都是向所选元素内部的"开始处"插入内容,但是两者的操作对象是颠倒的。

语法:

$(A).prependTo(B)

表示将 A 插入到 B 内部的开始处。

示例:

$(function () {$("#btn").click(function () { var $li = "西瓜"; $($li).prependTo("ul");})})

About "jquery how to add a li element" this article content is introduced here, thank you for reading! I believe everyone has a certain understanding of "how to add a li element to jquery" knowledge. If you still want to learn more knowledge, please pay attention to the industry information channel.

Tags: Element method content end example grammar knowledge similarity two function durian article upside down size value that is easy to operate tutorial article easy to understand Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Microsoft macOS Xiaomi Shulou Technology MySQL