Comment créer des nœuds frères en javascript

JavaScript est un langage de programmation couramment utilisé pour le développement front-end. Il peut créer, modifier, supprimer des éléments HTML et d'autres opérations DOM. Dans les documents HTML, les nœuds frères font référence à tous les nœuds enfants sous le même nœud parent. Parfois, nous devons créer un nouveau nœud frère via JavaScript pour obtenir des effets dynamiques ou des fonctions interactives sur la page Web.

Pour créer des nœuds frères, vous devez exploiter les éléments DOM dans le document HTML via JavaScript. DOM (Document Object Model) est une représentation d'un document HTML. Il convertit le document HTML en une structure arborescente accessible et manipulable à l'aide de JavaScript.

Ci-dessous, je vais vous montrer comment utiliser JavaScript pour créer des nœuds frères à travers plusieurs cas.

1. Insérer un nouvel élément avant un élément frère

Nous pouvons utiliser la méthode insertBefore() pour ajouter un nouvel élément avant un élément frère. Voici l'exemple de code :

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

Dans cet exemple, utilisez d'abord la méthode getElementById() pour obtenir le nœud de référence (c'est-à-dire l'élément pour créer un nœud frère), puis utilisez le createElement () pour créer un nœud d'élément div, définissez son attribut innerHTML sur "new node". Enfin, utilisez la méthode insertBefore() pour insérer le nouveau nœud dans le nœud parent du nœud de référence et devenir le nœud frère précédent du nœud de référence.

2. Insérer un nouvel élément après l'élément frère

Si nous devons ajouter un nouveau nœud après l'élément frère, nous pouvons l'obtenir en premier Le nœud frère suivant de l'élément frère, puis insère un nouveau nœud devant lui. Voici l'exemple de code :

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

Dans cet exemple, utilisez d'abord la méthode getElementById() pour obtenir le nœud de référence, puis créez un nœud d'élément div et définissez son attribut innerHTML sur "new node". Ensuite, utilisez la propriété nextSibling pour obtenir le nœud frère suivant du nœud de référence. Enfin, utilisez la méthode insertBefore() dans le nœud parent du nœud de référence pour insérer le nouveau nœud devant le nœud frère suivant du nœud de référence.

3. Insérer un nouvel élément à l'intérieur de la balise

Si nous voulons ajouter un nœud à l'intérieur d'une balise existante, nous pouvons utiliser appendChild() méthode . Voici l'exemple de code :

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

Dans cet exemple, utilisez d'abord la méthode getElementById() pour obtenir le nœud de référence, puis créez un nœud d'élément span et définissez son attribut innerHTML sur "new node". Enfin, utilisez la méthode appendChild() à l’intérieur du nœud de référence pour ajouter le nouveau nœud à l’étiquette.

Résumé

En JavaScript, nous pouvons créer, modifier, supprimer des éléments HTML et d'autres opérations DOM en exploitant des éléments DOM. L'une des opérations les plus courantes consiste à créer un nouveau nœud frère. . Cet article présente trois méthodes de création de nœuds frères via JavaScript, notamment l'insertion de nouveaux éléments avant les éléments frères, l'insertion de nouveaux éléments après les éléments frères et l'insertion de nouveaux éléments à l'intérieur des balises. Nous pouvons choisir différentes méthodes pour obtenir des effets dynamiques ou des fonctions interactives sur les pages Web en fonction de la situation réelle.

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!