Modification d'un Objet HTML cloné

Version imprimable

28/01/2013, 17h35
Aoernis

Modification d'un Objet HTML cloné
Bonjour,

Comme vous vous en douté j'ai une question. Voila j'aimerai modifier l'id d'un sous élément d'un élément clonée dans une page HTML. Je m'explique, j'ai :
Code:

1 2 3 4 <div id="parent"> <div id="enfant"> </div> </div>
le but étant de clonée la div "parent" comme ceci :

Code:

var clone = document.getElementById('parent').cloneNode(true);

et de changer l'id d'enfant en passant par clone pour avoir par exemple
Code:

1 2 3 4 <div id="parent"> <div id="enfant_nb_2"> </div> </div>
Problème, je ne sais pas comment faire.
Quelqu'un a une suggestion ? :)

Merci

Edit: J'avais bien chercher des balises code (pas longtemps je l'avoue), mais je m'attendait a ce qu'elle soit représenter plus explicitement, toutes mes confuses :/
28/01/2013, 18h12
javatwister

ben si je suis ta logique, après:

Code:

var clone = document.getElementById('parent').cloneNode(true);

il te faut changer l'id du noeud que tu viens de créer, sinon bug:

Code:

clone.id="parent2";

puis changer l'id de l'enfant (sinon bug):

Code:

clone.getElementsBytagName("div")[0].id="enfant2";

schématiquement, voilà, si ton dom est aussi simple que dans l'exemple;
28/01/2013, 18h46
Aoernis

Merci de ta réponse. J'aurai espérer pouvoir faire quelque chose de plus proche de getElementById, mais ça devrais faire l'affaire.
A titre purement informatif, cet méthode fonctionne telle sur plusieurs niveaux ? Peut-on faire :

Code:

clone.getElementsBytagName("div")[0].getElementsBytagName("div")[0].id="enfant2";

J'ajoute que j'ai du louper quelque chose de critique puisque je me prend un jolie :

clone.getElementsBytagName is not a function
28/01/2013, 19h48
javatwister

attention à la casse, c'est mi qui ai tapé trop vite:

Code:

clone.getElementsByTagName

par contre, l'instruction que tu proposes n'a pas tellement de sens vue la structure;
29/01/2013, 19h11
Aoernis
Effectivement l'instruction que j'ai écrite supposais qu'elle s'applique à une structure avec une plus grande profondeur. Comme trois div les unes dans les autres.

Au passage j'en profite pour ajouter une question de plus sur le même thème.
Imaginons maintenant que nous ayons :
Code:

1 2 3 4 5 <div id="une_div"> <p> Un paragraphe </p> </div>
Comment puis-je, toujours dans un clone de la div, modifier le contenue de la balise <p> ? J'ai bien essayer :
Code:

1 2 var clone = document.getElementById('une_div').cloneNode(true); clone.getElementsByTagName('p')[0].innerHTML = 'Lorem Impsum ';
Mais innerHTML semble être une fonctionnalité propre à l'objet document et ne marche pas ici et comme le texte a modifier n'est pas une propriété de la balise je suis coincé. :/
29/01/2013, 19h19
NoSmoking

Bonjour,
pour voir la modification il faudrait peut être que l'objet cloné soit ajouté au document.
29/01/2013, 19h40
Aoernis

Bonjour

Oui c'est évident, et cela arrive dans un second temps.
Cependant il me parait contre intuitif de devoir ajouter l’élément à l'Objet document pour pouvoir ensuite faire innerHTML dessus.

C'est contournée le problème. Et par une solution peut élégante qui plus est parce que la place de l’élément <p> dans le document peut être variable et donc nécessité l'ajout d'un id. Alors que sa place dans notre clone est parfaitement connue.

Allons bon je ne vais quand même pas être obliger d'ajouter un id à l'élément <p> de mon clone pour ensuite pouvoir faire un :

Code:

document.getElementById('mon_id').innerHTML = 'Lorem Ipsum';

C'est trop... moche :cry:
29/01/2013, 20h34
javatwister

hum,

quoique président à titre honorifique des pourfendeurs d'innerHTML, je dois admettre que la "propriété" fonctionne à tous les niveaux du dom!
revois ton test, ça doit marcher;

Non il n'est pas nécessaire de l'appender pour faire la modification, mais dans ton code la modification est bel et bien réalisée.
pour test
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body> <div id="une_div"> <p>Un paragraphe</p> </div> <div id="autre_div" style="background-color:#FEE;">Ici une autre DIV</div> <script> var oDest = document.getElementById('autre_div'); var clone = document.getElementById('une_div').cloneNode(true); clone.getElementsByTagName('p')[0].innerHTML = 'Lorem Impsum '; oDest.appendChild( clone); </script> </body>
[EDIT] tout comme l'a dit javatwister plus rapidement

29/01/2013, 21h06
Aoernis

Damned, effectivement l'erreur était dans mon script cela fonctione

Que me propose tu comme solution alternative au innerHTML mon cher javatwister ?
30/01/2013, 08h19
Bovino

innerHTML a été normalisé et appartient désormais au DOM HTML5. Nul besoin de le remplacer, surtout dans ton contexte.
30/01/2013, 10h17
javatwister

principe de précaution: c'est une méthode permissive au dernier degré qui donne l'impression de pouvoir refaire le dom d'un clic, en détruisant toute organisation logique;
il serait intéressant de tester au validateur certaines structures réécrites à coup de inner...