Ajouter, supprimer et déplacer des listes javascript

JavaScript est un langage de programmation largement utilisé dans le développement web. Les listes sont un élément très courant dans la conception Web. Grâce à JavaScript, nous pouvons facilement ajouter, supprimer et déplacer des éléments de liste pour améliorer l'expérience utilisateur des pages Web. Nous discuterons ensuite des méthodes d’ajout, de suppression et de déplacement de listes.

1. Ajout de liste :

Lorsque nous avons besoin d'ajouter des éléments de liste, nous pouvons le faire via le code suivant :

// 找到要添加新列表项的父元素
var list = document.getElementById("list");
// 创建新的列表项
var newItem = document.createElement("li");
// 给新的列表项添加内容
var text = document.createTextNode("新的列表项");
newItem.appendChild(text);
// 将新的列表项添加到列表中
list.appendChild(newItem);

Dans le au-dessus du code, nous utilisons d'abord la méthode document.getElementById() pour obtenir l'élément parent du nouvel élément de liste à ajouter. Ensuite, créez un nouvel élément de liste via la méthode document.createElement(), ajoutez du contenu à l'élément de liste, et enfin ajoutez le nouvel élément de liste à la liste via appendChild() code> méthode milieu. <code>document.getElementById() 方法获取到要添加新列表项的父元素。接着，通过 document.createElement() 方法创建新的列表项，在列表项中添加内容，最后通过 appendChild() 方法将新的列表项添加到列表中。

二、列表的删除：

当我们需要删除列表元素时，可以通过以下代码来实现：

// 找到要删除的列表项
var item = document.getElementById("deleteItem");
// 找到列表项的父元素
var list = item.parentNode;
// 删除列表项
list.removeChild(item);

在上述代码中，我们首先通过 document.getElementById() 方法获取到要删除的列表项。接着，通过 parentNode 属性获取到该列表项的父元素。最后，通过 removeChild() 方法将该列表项从列表中删除。

三、列表的移动：

当我们需要移动列表元素时，可以使用以下两种方法：

1. insertBefore() 方法：

该方法将某个元素插入到指定元素之前。通过以下代码可以实现移动列表元素：

// 找到要移动的列表项
var item = document.getElementById("moveItem");
// 找到要插入到的位置
var location = document.getElementById("beforeLocation");
// 找到列表项的父元素
var list = item.parentNode;
// 移动列表项到指定位置之前
list.insertBefore(item, location);

在上述代码中，我们首先通过 document.getElementById() 方法获取到要移动的列表项以及要插入到的位置。接着，通过 parentNode 属性获取到该列表项的父元素。最后，通过 insertBefore() 方法将该列表项插入到指定位置之前。

2. appendChild() 方法：

该方法将某个新元素插入到指定元素的子元素列表的末尾。通过以下代码可以实现移动列表元素：

// 找到要移动的列表项
var item = document.getElementById("moveItem");
// 找到要移动到的位置
var location = document.getElementById("afterLocation");
// 找到列表项的父元素
var list = item.parentNode;
// 从列表中删除该列表项
list.removeChild(item);
// 将该列表项添加到新的位置
location.appendChild(item);

在上述代码中，我们首先通过 document.getElementById() 方法获取到要移动的列表项以及要移动到的位置。接着，通过 parentNode 属性获取到该列表项的父元素。接着，通过 removeChild() 方法将该列表项从原列表中删除。最后，使用 appendChild()

2. Suppression de la liste :

Lorsque nous devons supprimer des éléments de la liste, nous pouvons le faire via le code suivant :

rrreee

Dans le ci-dessus le code , nous obtenons d'abord l'élément de liste à supprimer via la méthode document.getElementById(). Ensuite, récupérez l'élément parent de l'élément de liste via l'attribut parentNode. Enfin, l'élément de liste est supprimé de la liste via la méthode removeChild(). #🎜🎜##🎜🎜#3. Mouvement de liste : #🎜🎜##🎜🎜#Lorsque nous devons déplacer des éléments de liste, nous pouvons utiliser les deux méthodes suivantes : #🎜🎜#

1. Méthode insertBefore() :

#🎜🎜#Cette méthode insère un élément avant l'élément spécifié. Le déplacement d'éléments de liste peut être réalisé via le code suivant : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous obtenons d'abord l'élément de liste à déplacer et l'élément de liste dans lequel insérer via le document.getElementById () emplacement de la méthode. Ensuite, récupérez l'élément parent de l'élément de liste via l'attribut parentNode. Enfin, l'élément de liste est inséré avant la position spécifiée via la méthode insertBefore(). #🎜🎜#

2. appendChild() Méthode :

#🎜🎜#Cette méthode insère un nouvel élément dans l'élément spécifié. fin de la liste des éléments enfants. Le déplacement d'éléments de liste peut être réalisé via le code suivant : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous obtenons d'abord l'élément de liste à déplacer et l'élément de liste vers lequel se déplacer via le document.getElementById () emplacement de la méthode. Ensuite, récupérez l'élément parent de l'élément de liste via l'attribut parentNode. Ensuite, utilisez la méthode removeChild() pour supprimer l'élément de liste de la liste d'origine. Enfin, utilisez la méthode appendChild() pour ajouter l'élément de liste au nouvel emplacement. #🎜🎜##🎜🎜#Résumé : #🎜🎜##🎜🎜#JavaScript fournit une variété de méthodes pour ajouter, supprimer et déplacer des éléments de liste. Les développeurs peuvent choisir des méthodes appropriées en fonction de besoins spécifiques pour améliorer l'expérience utilisateur des pages Web. #🎜🎜#

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!