1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Trucs & Astuces
  5. Simplifier la creation dynamique d'element html

Simplifier la creation dynamique d'element html

Soyez le premier à donner votre avis sur cette source.

Vue 4 629 fois - Téléchargée 330 fois

Télécharger le projet
Commenter

Description

il faut avouer que cree du html dynamiquement c'est pas la joie ( syntaxe trop longue ) c'est pour ce motif que je me suis cree une petite fonction qui me rend plus faineant et qui simplifie grandement la creation d'un element et ses attribut le tout sur une seule ligne tout en ayant une bonne lisibilite

la fonction
creation(elem,parent)

dans cette exemple je cree un div dans le corp de la page qui a comme id div1 puis j'ajoute une image dans ce meme div les deux premiers etant reserver a preciser l'element a cree et ou le placer soit dans body soit dans getElementById('id de lelement')

creation('div','body','id','div1')
creation(img,'div1','id','img1','src','image.jpg')

++

Source / Exemple : 


function creation(elem,parent){
var ddc=(arguments[1]=='body') ? document.documentElement.childNodes[1] : document.getElementById(parent)

var constrution=document.createElement(elem);
if((arguments.length>2)){
var arle=2
while (arle<arguments.length){
constrution.setAttribute(arguments[arle],arguments[arle+1]);
arle+=2 
}
}
ddc.appendChild(constrution)
}

function createxte(parent,txt){
document.getElementById(parent).appendChild(document.createTextNode(txt));
}

Conclusion :


en esperant que sa puisse etre utile a d'autre que mois
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
Zestyr
Messages postés
467
Date d'inscription
mercredi 12 août 2009
Statut
Membre
Dernière intervention
17 octobre 2011
Pour éviter d'utiliser setAttribute, il y a une méthode très simple, ex sur ton code:

if((arguments.length>2)){
var arle=2
while (arle<arguments.length){
constrution.[arguments[arle]] = arguments[arle+1]);
arle+=2
}
}

Ps: tu devrais permettre la sélection de l'objet avec un autre moyen que l'id, par exemple avec un this ou un name ou meme l'objet directement.
Signaler
@karamel
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
 56
la fonction il est vrait tourne autour de setattribute, elle fonctionne tres bien avec ff chrome safari opera et ie 8 mais avec ie 6 et 7 c'est sur il faut faire attention a la compatibilite de setattribut et encore si on utilise une feuille de style et qui de mon avis est preferable on peut faire beaucoup de chose il ne restera que les evenement que l'on ne poura pas gere de cette facon avec ie 6 et 7
Signaler
ralecul
Messages postés
111
Date d'inscription
dimanche 23 mars 2003
Statut
Membre
Dernière intervention
1 août 2008
Si c'était si simple que ça, ce serait merveilleux !
Mais tes fonctions ne gèrent aucune des spécificités de chaque navigateur.

J'ai déjà tenté de faire un code équivalent il y a un moment (http://www.javascriptfr.com/codes/DOM-BUILDER-PROTOTYPE-ROCKS_47227.aspx), mais il est loin de pouvoir gérer tous les cas particuliers...

Si tu veut un code fonctionnel qui marche vraiment pour tous les cas et tous les navigateurs (IE6 compris), je te conseille de te tourner vers prototype : http://www.prototypejs.org/api/element.
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)