How to add a li element in jquery-Front-end Q&A-php.cn

How to add a li element in jquery

青灯夜游

Release： 2022-04-20 17:48:56

Original

5106 people have browsed it

Methods to add li elements: 1. Use "$("ul").append(li element)"; 2. Use "$(li element).appendTo("ul")"; 3. Use "$("ul").prepend(li element)"; 4. Use "$(li element).prependTo("ul")".

How to add a li element in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Adding a li element means adding a sub-element li inside the ul element.

In jquery, there are 4 ways to add child elements:

append() and appendTo(): Insert to the "end" inside the selected element Content
prepend() and prependTo(): Insert content to the "beginning" inside the selected element

Method 1 : Use the append() method

In jQuery, we can use the append() method to insert content "at the end" inside the selected element.

Syntax:

$(A).append(B)

Copy after login

means inserting B at the end of A.

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                var $li = "<li>香蕉</li>";
                $("ul").append($li);
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
		</ul>
		<input id="btn" type="button" value="插入" />
	</body>
</html>

Copy after login

How to add a li element in jquery

Method 2: Use the appendTo() method

In jQuery, appendTo( ) and append( ) are similar in function. They both insert content "at the end" inside the selected element, but their operation objects are reversed.

Syntax:

$(A).appendTo(B)

Copy after login

means inserting A into the end of B.

Example:

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

Copy after login

How to add a li element in jquery

Method 3: Use prepend( )

prepend( ) method Inserts content "at the beginning" inside the selected element.

Syntax:

$(A).prepend(B)

Copy after login

means inserting B at the beginning of A.

Example:

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

Copy after login

How to add a li element in jquery

Method 3: Use prependTo( )

prependTo Although the two methods ( ) and prepend( ) have similar functions, they both insert content into the "beginning" of the selected element, but their operation objects are reversed.

Syntax:

$(A).prependTo(B)

Copy after login

means inserting A into the beginning of B.

Example:

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

Copy after login

How to add a li element in jquery

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to add a li element in jquery. For more information, please follow other related articles on the PHP Chinese website!