How to add and remove elements with jquery-Front-end Q&A-php.cn

How to add and remove elements with jquery

青灯夜游

Release： 2022-06-08 18:53:37

Original

2545 people have browsed it

Methods to add elements: 1. Use append() or prepend() to add sub-elements inside the specified element; 2. Use after() or before() to add sibling elements. Removal method: 1. Use remove() to delete the selected elements and sub-elements; 2. Use empty() to delete the sub-elements but keep the selected elements.

How to add and remove elements with jquery

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

Four ways to add elements with jQuery:

1. append() adds content at the end of the selected element.

Use the append() method to add child elements to the "end" inside the div 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-3.2.1.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                var newp = "<p>一个新段落</p>";
                $("div").append(newp);
            })
        })
    </script>
	</head>
	<body>
		<div style="background-color: #FF0000;">
			<p>第一段文本</p>
			<p>第二段文本</p>
			<p>第三段文本</p>
		</div>
		<input id="btn" type="button" value="插入" />
	</body>
</html>

Copy after login

How to add and remove elements with jquery

2. prepend() adds content at the beginning of the selected element.

The prepend() method can add child elements to the "beginning" inside the div element.

Syntax:

$(A).prepend(B)

Copy after login

means inserting B at the beginning of A.

Example:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$("div").prepend(newp);
	})
})

Copy after login

How to add and remove elements with jquery

3. after() selects an element and inserts content after the element.

$(A).after(B) means inserting B after the outside of A.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").after("这是往div后面增加的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div后面增加内容</button>

	</body>
</html>

Copy after login

How to add and remove elements with jquery

4. before() selects an element and inserts content into the element.

$(A).before(B) means inserting B before the outside of A.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").before("这是往div前面增加的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div前面增加内容</button>

	</body>
</html>

Copy after login

How to add and remove elements with jquery

jQuery way to delete elements 2 methods:

Use The remove() method can delete the selected element and sub-elements at the same time.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function () {
		            $("#btn").click(function () {
		                $("li:nth-child(4)").remove();
		            })
		        })
		    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

Copy after login

How to add and remove elements with jquery

Using empty() will delete the child elements of the selected element, but will not delete the selected element.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function () {
		            $("#btn").click(function () {
		                $("ul li:nth-child(4)").empty();
		            });
		        })
		    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

Copy after login

How to add and remove elements with jquery

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

The above is the detailed content of How to add and remove elements with jquery. For more information, please follow other related articles on the PHP Chinese website!