What is the method to append child elements in jquery

青灯夜游
Release: 2022-03-23 19:28:19
Original
6605 people have browsed it

Methods for appending child elements in jquery: 1. append(), which can append child elements at the end of the selected element, with the syntax "$(parent element).append(child element)"; 2. appendTo (), you can append the child element to the end of the specified element, the syntax is "$(child element).appendTo(parent element)".

What is the method to append child elements in jquery

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

There are two ways to append child elements (add child elements at the end) in jquery:

  • append()

  • appendTo()

jQuery append() method

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

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

What is the method to append child elements in jquery

jQuery appendTo() method

In jQuery, appendTo( ) and append ( ) Although the functions of these two methods are similar, 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:

<!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>";
                $($li).appendTo("ul");
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
			<li>香蕉</li>
		</ul>
		<input id="btn" type="button" value="插入" />
	</body>
</html>
Copy after login

What is the method to append child elements in jquery

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

The above is the detailed content of What is the method to append child elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!