Maison > Article > interface Web > jquery crée des éléments DOM
jquery crée des éléments DOM
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建DOM元素</title> </head> <body> </body> </html>
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('img')
Chapitre Étape 2 : Ajouter du contenu ou des attributs au nouvel élément
img.src = '../images/zly.jpg' img.width = 200 img.style.borderRadius = '10%' img.style.boxShadow = '3px 3px 3px #888'
Étape 3 : Ajouter le nouvel élément à la page
document.body.appendChild(img)
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 = $('<img>') var img = $('<img src="../images/zly.jpg" width="200">') img.appendTo('body')
La deuxième étape : Ajouter contenu au nouvel élément ou attributs
img.attr('src', '../images/zly.jpg') img.css('width',200) img.css('border-radius','10%') img.css('box-shadow','3px 3px 3px #888')
Étape 3 : Ajouter à la page
img.appendTo('body')
Les étapes ci-dessus peuvent être simplifiées : utilisez l'opération de chaîne unique de jquery pour terminer, changer une étoile
$('<img>').attr('src', '../images/gyy.jpg').css('width','200px').css('border-radius','10%').css('box-shadow','3px 3px 3px #888').appendTo('body')
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!