Comment ajouter un élément li dans jquery-Questions et réponses frontales-php.cn

Comment ajouter un élément li dans jquery

青灯夜游

Libérer： 2022-04-20 17:48:56

original

5070 Les gens l'ont consulté

Méthodes pour ajouter des éléments li : 1. Utilisez "$("ul").append(li element)"; 2. Utilisez "$(li element).appendTo("ul")"; "ul").prepend(li element)"; 4. Utilisez "$(li element).prependTo("ul")".

Comment ajouter un élément li dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Ajouter un élément li revient à ajouter un sous-élément li à l'intérieur de l'élément ul.

Dans jquery, il existe 4 façons d'ajouter des éléments enfants :

append() et appendTo() : Insérer du contenu à la "fin" à l'intérieur de l'élément sélectionné
prepend( ) et prependTo( ) : Insérer du contenu au "début" à l'intérieur de l'élément sélectionné

Méthode 1 : Utiliser la méthode append()

Dans jQuery, nous pouvons utiliser la méthode append() pour ajouter du contenu à la "fin" à l'intérieur de l'élément sélectionné. élément sélectionné Insérer du contenu.

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

Copier après la connexion

Comment ajouter un élément li dans jquery

Méthode 2 : Utilisez la méthode appendTo()

Dans jQuery, bien que les deux méthodes appendTo() et append() aient des fonctions similaires, elles ajoutent toutes deux à l'élément sélectionné. Insérer du contenu à la fin", mais les objets d'opération des deux sont inversés.

Syntaxe :

$(A).appendTo(B)

Copier après la connexion

signifie insérer A à la fin de B.

Exemple :

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

Copier après la connexion

Comment ajouter un élément li dans jquery

Méthode 3 : Utilisez la méthode prepend()

prepend() pour insérer du contenu au "début" à l'intérieur de l'élément sélectionné.

Syntaxe :

$(A).prepend(B)

Copier après la connexion

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

Exemple :

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

Copier après la connexion

Comment ajouter un élément li dans jquery

Méthode 3 : Utilisez prependTo()

prependTo( ) et prepend() Bien que les fonctions de ces deux méthodes soient similaires, elles vont toutes les deux au "début" à l'intérieur du élément sélectionné Insérer du contenu, mais les objets d'opération des deux sont inversés.

Syntaxe :

$(A).prependTo(B)

Copier après la connexion

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

Exemple :

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

Copier après la connexion

Comment ajouter un élément li dans jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!