Maison > Article > interface Web > Comment ajouter et supprimer des éléments en JavaScript
Comment ajouter et supprimer des éléments en JavaScript
- 醉折花枝作酒筹original
- 2021-04-08 15:46:063686parcourir
Méthodes pour ajouter et supprimer des éléments dans JS : 1. Utilisez "appendChild("element name")" pour ajouter des éléments ; 2. Utilisez "insertBefore(element name, où ajouter l'élément)" pour l'ajouter. n'importe où Element; 3. Utilisez "removeChild("Element Name")" pour supprimer l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Comment ajouter et supprimer des éléments en JavaScript
Pour ajouter un élément, vous devez d'abord créer un élément. Si vous souhaitez écrire. l'élément nouvellement ajouté Pour saisir du texte, vous devez créer un nœud de texte, puis insérer la valeur du nœud de texte dans l'élément nouvellement ajouté.
(1) createElement("element name") : Cette méthode peut créer un nouvel élément. Par exemple : createElement("p") signifie qu'une balise p (élément/paragraphe) est créée.
(2) createTextNode("text content") : Cette méthode peut créer un nœud de texte. Par exemple : createTextNode("Je suis un nouveau contenu") signifie qu'un nœud de texte avec la valeur "Je suis un nouveau contenu" est créé.
(3) appendChild("Element Name") : Ajoutez un nouvel élément. Par exemple : ul.appendChild("li") signifie ajouter un élément li à ul.
(4) removeChild("Element Name") : Supprime un élément. L’usage est opposé à (3).
L'exemple suivant ajoute dynamiquement l'élément li à ul, et l'ajoute devant le li d'origine à chaque fois.
<script>
window.οnlοad=function () {
var UL=document.getElementsByClassName('box')[0];
var btn=document.getElementsByTagName('button');
var index=1; //序号计数器
btn[0].οnclick=function () { //创建新节点，并添加新元素,新添加的元素总是在最前面
var li=document.createElement('li'), //创建li元素
content='我是第'+index+'个li'; //li元素的文本节点的内容
var text=document.createTextNode(content); //创建li元素的文本节点
index++; //每创建一个li计数就+1
var Li=UL.getElementsByTagName('li'); //获取页面中的li集合
UL.insertBefore(li,Li[0]),li.appendChild(text); //在页面中第一个li前面添加新的li标签
}
btn[1].οnclick=function () { //删除添加的元素
var li=document.getElementsByTagName('li')[0];
if(!index%2==0){
li.parentNode.removeChild(li);
}
}
}
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body> Remarque : Si vous souhaitez que chaque li nouvellement ajouté soit devant le li d'origine, vous devez utiliser la méthode insertBefore() .
insertBefore()Il contient deux valeurs de paramètre. La première valeur de paramètre est le nom de l'élément que vous souhaitez ajouter, et la deuxième valeur de paramètre est le nom de l'élément que vous souhaitez ajouter où. (la valeur peut être nulle, l'effet est le même que appendChild()).
Par exemple, dans l'exemple ci-dessus, je veux que l'élément li ajouté à chaque fois soit au premier plan. Ensuite, il vous suffit de modifier la quatrième étape :
var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);Autrement dit, il existe deux manières d'ajouter un nouvel élément : ①appendChild(), ②insertBefore(); pour supprimer un élément : removeChild()
Apprentissage recommandé : Tutoriel vidéo javascript
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!