How to add child nodes in front with jquery-Front-end Q&A-php.cn

How to add child nodes in front with jquery

青灯夜游

Release： 2022-03-23 19:37:15

Original

3250 people have browsed it

Methods to add child nodes in front: 1. Use prepend() to insert a child node at the beginning of the selected element, the syntax is "$(element).prepend(child node)"; 2. Use rependTo (), you can insert the child node at the beginning of the specified element, the syntax is "$(child node).prependTo(element)".

How to add child nodes in front with jquery

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

There are two ways to add child nodes in front of jquery:

prepend( )
prependTo( )

jQuery prepend() method

In jQuery, we can use the prepend() method to insert content to the "beginning" inside the selected element .

Syntax:

$(A).prepend(B)

Copy after login

means inserting B at the beginning 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").prepend($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 child nodes in front with jquery

jQuery prependTo() method

In jQuery, prependTo( ) and prepend( ) are similar in function. 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:

<!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).prependTo("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

How to add child nodes in front with jquery

Explanation:

prepend() and prependTo() have similar functions but different operations On the contrary, many novices are easily confused. However, if we carefully consider the English meaning of "to", it is easy to distinguish. prepend() means inserting content into the element, and prependTo() means inserting content into the "(to)" element.

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

The above is the detailed content of How to add child nodes in front with jquery. For more information, please follow other related articles on the PHP Chinese website!