communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery crée des éléments DOM

jquery crée des éléments DOM

无忌哥哥
Libérer： 2018-06-29 14:19:38
original
5104 Les gens l'ont consulté

jquery crée des éléments DOM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建DOM元素</title>
</head>
<body>
</body>
</html>
Copier après la connexion

La création de nouveaux éléments est très difficile à fonctionner de manière native

Étape 1 : Créer de nouveaux éléments

var img = document.createElement(&#39;img&#39;)
Copier après la connexion

Chapitre Étape 2 : Ajouter du contenu ou des attributs au nouvel élément

img.src = &#39;../images/zly.jpg&#39;
img.width = 200
img.style.borderRadius = &#39;10%&#39;
img.style.boxShadow = &#39;3px 3px 3px #888&#39;
Copier après la connexion

Étape 3 : Ajouter le nouvel élément à la page

document.body.appendChild(img)
Copier après la connexion

L'utilisation de jquery simplifiera grandement ces opérations

Il peut également être divisé en trois étapes

La première étape : Créer un nouvel élément, au moins une paire de balises, les crochets angulaires ne doivent pas être omis

var img = $(&#39;<img>&#39;)
var img = $(&#39;<img src="../images/zly.jpg" width="200">&#39;)
img.appendTo(&#39;body&#39;)
Copier après la connexion

La deuxième étape : Ajouter contenu au nouvel élément ou attributs 

img.attr(&#39;src&#39;, &#39;../images/zly.jpg&#39;)
img.css(&#39;width&#39;,200)
img.css(&#39;border-radius&#39;,&#39;10%&#39;)
img.css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;)
Copier après la connexion

Étape 3 : Ajouter à la page 

img.appendTo(&#39;body&#39;)
Copier après la connexion

Les étapes ci-dessus peuvent être simplifiées : utilisez l'opération de chaîne unique de jquery pour terminer, changer une étoile 

$(&#39;<img>&#39;).attr(&#39;src&#39;, &#39;../images/gyy.jpg&#39;).css(&#39;width&#39;,&#39;200px&#39;).css(&#39;border-radius&#39;,&#39;10%&#39;).css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;).appendTo(&#39;body&#39;)
Copier après la connexion

En fait, lorsque vous utilisez la fonction $() pour créer un élément, vous pouvez également passer le deuxième paramètre et définir les attributs directement. Ci-dessous, nous simplifierons davantage ces codes

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!

Étiquettes associées：
jquery创建元素，jqueryDOM元素
source：php.cn
Article précédent：Vue utilise plusieurs méthodes pour implémenter des en-têtes de table et des premières colonnes fixes Article suivant：Une introduction à vuex
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
Derniers articles par auteur
Derniers numéros
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Définir la relation "OR" pour meta_query ORtax_query J'essaie d'utiliser WP_Query pour créer une requête contenant un élément meta_query et un ...
Depuis 2024-04-04 20:01:43
0
1
1346
"waitForSelector" expire avant que l'élément ne devienne visible, même si l'élément est à l'écran Je construis un robot de paiement mais j'ai des problèmes avec ces stupides fenêtres conte...
Depuis 2024-04-04 18:31:08
0
1
1416
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal