Discussion :

[Aoernis]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="parent">
   <div id="enfant">
   </div>
</div>

le but étant de clonée la div "parent" comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :/

[javatwister]

ben si je suis ta logique, après:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clone.id="parent2";

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

schématiquement, voilà, si ton dom est aussi simple que dans l'exemple;

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[javatwister]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clone.getElementsByTagName

par contre, l'instruction que tu proposes n'a pas tellement de sens vue la structure;

[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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é. :/

[NoSmoking]

Bonjour,
pour voir la modification il faudrait peut être que l'objet cloné soit ajouté au document.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

C'est trop... moche

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Aoernis]

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

Que me propose tu comme solution alternative au innerHTML mon cher javatwister ?

[Bovino]

innerHTML a été normalisé et appartient désormais au DOM HTML5. Nul besoin de le remplacer, surtout dans ton contexte.

[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...