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.