begin process at 2012 02 05 22:36:50
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML

SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML


 Information sur la source

Note :
3 / 10 - par 2 personnes
3,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :optimiser, html dynamique, faineant, simple Niveau :Débutant Date de création :09/11/2009 Vu / téléchargé :3 312 / 234
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 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')
cre ation(img,'div1','id','img1','src','image.jpg')

+ +

Source

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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Source avec Zip CONVERTISSEUR D'IMAGE BASE 64
Source avec Zip Source avec une capture HTML5 PLAYER
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MASTERMIND IPHONE par fifrelin70
Source avec Zip Source avec une capture INFO BULLES STANDARD COMPATIBLE FF,IE,CHROME,OPERA SIMPLE D'... par alex3105
AJAX EN MOINS DE 50 LIGNES par Kimjoa
Source avec Zip Source avec une capture JEU SIMPLE ET EFFICACE DE TIC-TAC-TOE SE JOUANT SUR UN MÊME ... par FasteX_
Source avec une capture MENU SIMPLE par tit1012

Commentaires et avis

Commentaire de ralecul le 11/11/2009 20:27:08 1/10

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.

Commentaire de kazma le 11/11/2009 21:13:00 administrateur CS

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

Commentaire de Zestyr le 13/11/2009 19:48:11 5/10

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

javascript dans formulaire acrobat [ par domi ] "Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog recherche aide [ par g2m ] nouveau dans la création de site, je bute sur une chose simple, créer un menu déroulant horizontale avec survol.Un truc simple quoi!Dans cette barre 8 c'est simple comme bonjour mais je ne me raplle plus... [ par escaflone1 ] Bonjour,comme je le di je ne sais plus comment on fait pour actualiser une page mais juste une seul fois:la page charger puis 1 voir 2 sec apres hop i tout simple [ par pierre81 ] je débute et je voudrez savoir comment on fait pour dire que quand on clique sur la frame de gauche , je veux afficher un truc a droite merci de me do Formulaire tout simple [ par Angel42480 ] Bonjour, je travail en html,Je désirerais créer un formulaire, qui définisse une image.Exemple : on tape dans la case du formulaire : "arbre" . Je veu Supprimer menubar [ par meka ] Bonjour,Voilà, je m'enlise sur un truc simple depuis 4 jours !j' explique : j'aimerais faire disparaitre le menubar ( Menus : fichier-edition-affichag truc surement tres simple mais bon... [ par bipross ] Bonjour,Voici mon souci :....var nbJ = nb_jour(l,laDate); //retourne 24 par exempleif (nbJ &gt; 31){toto = 1;}else{toto = 2;}et j'obtiens l'erreur "ob Afficher une popup [ par BsEtZeOpLhD ] Bonjour.Je cherche un code pour afficher une simple popup à l'affichage d'une fenetre. Une popup affichant une page web (http://perso.wanadoo.fr/bsetz ouvrir une page selon la resolution de l'utilisateur pour optimiser l'affichage !? [ par lookme ] bonjour !jai fait un fond en 800*600 assez détailler ,avec cadres,effets,emplacements etc... sous illustrator ,ce qui ma donné au final une image "jp contenu d'un textarea dans des 'input text' [ par SauCisS ] Bonjour a tousMon problème est simple, peut-t-on me dire comment faire pour mettre le contenu d'une zone de texte (texarea) dans des zones de texte si


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Renewable Energy is Within Reach
Photo Beautiful El Capitan Yosemite National Park 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)