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

jquery crée des éléments DOM

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

<!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!

jquery dom

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

Article précédent：Vue utilise plusieurs méthodes pour implémenter des en-têtes de table et des premières colonnes fixesArticle suivant：Vue utilise plusieurs méthodes pour implémenter des en-têtes de table et des premières colonnes fixes

Articles Liés

Voir plus