Home >Web Front-end >Front-end Q&A >How to add a li element in jquery

How to add a li element in jquery

青灯夜游
青灯夜游Original
2022-04-20 17:48:565111browse

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)

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>

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)

means inserting A into the end of B.

Example:

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

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)

means inserting B at the beginning of A.

Example:

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

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)

means inserting A into the beginning of B.

Example:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn