Maison  >  Article  >  interface Web  >  jquery crée des éléments DOM

jquery crée des éléments DOM

无忌哥哥
无忌哥哥original
2018-06-29 14:19:385076parcourir

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(&#39;img&#39;)

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;

É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 = $(&#39;<img>&#39;)
var img = $(&#39;<img src="../images/zly.jpg" width="200">&#39;)
img.appendTo(&#39;body&#39;)

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;)

Étape 3 : Ajouter à la page

img.appendTo(&#39;body&#39;)

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;)

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!

Déclaration:
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