Comment créer un nœud dans jquery

王林
Libérer: 2023-05-12 09:07:37
original
2130 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript simple et efficace qui facilite la manipulation de documents HTML. Dans le développement réel, nous devons souvent créer de nouveaux nœuds et les ajouter au document.

Cet article expliquera comment utiliser jQuery pour créer un nouveau nœud et l'ajouter au document.

1. Créer un nouveau nœud

jQuery fournit une méthode createElement() pour créer un nouveau nœud. Cette méthode accepte un paramètre, qui représente le nom de balise de l'élément à créer.

Par exemple, pour créer un nouvel élément div, vous pouvez utiliser le code suivant :

var newDiv = $("<div>");
Copier après la connexion

Dans le code ci-dessus, nous utilisons la méthode $() pour créer un nouvel objet jQuery et l'attribuer à la variable newDiv. Puisque nous ne transmettons aucun paramètre dans la méthode $(), un élément div vide est créé.

2. Définir les attributs du nœud

Après avoir créé un nouveau nœud, nous pouvons définir les attributs du nœud, tels que l'identifiant, la classe, le style, etc. jQuery fournit quelques méthodes pour définir ces propriétés, telles que attr(), addClass(), css(), etc.

Par exemple, pour ajouter un attribut id à un élément div nouvellement créé, vous pouvez utiliser le code suivant :

var newDiv = $("<div>").attr("id", "myDiv");
Copier après la connexion

Dans le code ci-dessus, nous utilisons la méthode attr() pour définir l'attribut id de l'objet newDiv sur " maDiv".

3. Ajouter des nœuds enfants

Après avoir créé un nouveau nœud et défini ses propriétés, nous devrons peut-être l'ajouter au document. Voici deux situations pour présenter comment ajouter.

  1. Ajouter à la fin du nœud parent

Si nous voulons ajouter le nœud à la fin d'un nœud parent existant, nous pouvons utiliser la méthode append() du nœud parent.

Par exemple, pour ajouter l'élément newDiv créé dans le code ci-dessus à la fin de l'élément body, vous pouvez utiliser le code suivant :

$("body").append(newDiv);
Copier après la connexion

Dans le code ci-dessus, nous utilisons la méthode append() pour ajouter l'élément newDiv jusqu'à la fin de l'élément body.

  1. Ajouter à la position spécifiée

Si nous devons ajouter un nœud à une position spécifiée d'un nœud parent existant, nous pouvons utiliser la méthode insertBefore() ou insertAfter() du nœud parent.

Par exemple, pour ajouter l'élément newDiv créé dans le code ci-dessus avant le premier nœud enfant de l'élément body, vous pouvez utiliser le code suivant :

$("body").children().first().before(newDiv);
Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord la méthode children() pour obtenir tous les enfants du nœud de l'élément body, puis utilisez la méthode first() pour obtenir le premier nœud enfant et utilisez la méthode before() pour ajouter l'élément newDiv avant le premier nœud enfant.

4. Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser jQuery pour créer un nouveau nœud et l'ajouter au document. Nous pouvons créer un nouveau nœud via la méthode createElement(), définir les attributs du nœud via attr(), addClass(), css() et d'autres méthodes, et ajouter des nœuds via append(), insertBefore(), insertAfter() et d'autres méthodes. .dans le document. La maîtrise de ces méthodes peut nous aider à exploiter les documents HTML de manière rapide et efficace.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!