Comment ajouter et supprimer des éléments avec jquery-Questions et réponses frontales-php.cn

Comment ajouter et supprimer des éléments avec jquery

青灯夜游

Libérer： 2022-06-08 18:53:37

original

2643 Les gens l'ont consulté

Méthodes pour ajouter des éléments : 1. Utilisez append() ou prepend() pour ajouter des sous-éléments à l'intérieur de l'élément spécifié ; 2. Utilisez after() ou before() pour ajouter des éléments frères. Méthode de suppression : 1. Utilisez remove() pour supprimer les éléments et sous-éléments sélectionnés ; 2. Utilisez empty() pour supprimer les sous-éléments mais conservez les éléments sélectionnés.

Comment ajouter et supprimer des éléments avec jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, ordinateur Dell G3.

Quatre façons d'ajouter des éléments avec jQuery :

1. append() ajoute du contenu à la fin de l'élément sélectionné.

Utilisez la méthode append() pour ajouter des éléments enfants à la "fin" à l'intérieur de l'élément div.

Syntaxe :

$(A).append(B)

Copier après la connexion

signifie insérer B à la fin de A.

Exemple :

<!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>

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery

2. prepend() ajoute du contenu au début de l'élément sélectionné.

La méthode prepend() peut ajouter des éléments enfants au "début" à l'intérieur de l'élément div.

Syntaxe :

$(A).prepend(B)

Copier après la connexion

signifie insérer B au début de A.

Exemple :

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

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery

3 after() sélectionne un élément et insère du contenu après l'élément.

$(A).after(B) signifie insérer B derrière l'extérieur de A.

Exemple :

<!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>

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery

4 before() sélectionne un élément et insère du contenu dans l'élément.

$(A).before(B) signifie insérer B devant 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>

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery

2 façons de supprimer des éléments avec jQuery :

Utilisez la méthode Remove() pour supprimer les éléments sélectionnés et les éléments enfants en même temps.

<!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>

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery

L'utilisation de empty() supprimera les éléments enfants de l'élément sélectionné, mais ne supprimera pas l'élément sélectionné.

<!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>

Copier après la connexion

Comment ajouter et supprimer des éléments avec jquery