Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

appendChild ne fonctionne qu'une seule fois


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    appendChild ne fonctionne qu'une seule fois
    Bonjour !
    J'ai un <div id="incontent"></div> dans lequel je génère des éléments en utilisant javascript ... voici mon script:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    var lastId = 0; // initialise ID
     
            function MyFunction( var1, var2, var3) {
            const incontent = document.getElementById('incontent');
            incontent.innerHTML+= var1 + var2 + (var3 ? ' (var3=' + var3 + ')' : '');
                if (var3 === 'descforalink') {
                incontent.innerHTML += `<div class="contentLink"><p>a link</p></div></div>`;
                }
            }
            //manages the click on possible 
            document.getElementById('incontent').addEventListener('click', function (e) {
            lastId++ ; // for a different ID
            });
     
            // element in which to instantiate the contentDATA for another rendering...
            const contentDATA = document.getElementById('contentDATA');
     
            // contentDATA content is received
            contentDATA.addEventListener(MyMouv.Descperso, ({ data }) => {
            var divques1 = '<div class="contentDesc col-12"><p>';
            var divques2 = '</p>';
            var divques3 = '</div>';
            var contentallbtns = '';
            var contentbtnsbefore = '<div class="col-12 contentLink">';
            var contentbtnsafter = '</div></div>';
     
            MyFunction('', divques1 + data.text + divques2 , data.var3, divques3);
            // if actions buttons/links
            if (data.actions) {
            var btns = '';
            for (var i = 0; i < data.actions.length; i++) { if (i> 0) {btns += ' ';}
                let act = data.actions[i];
                btns += '<a class="mybtn"' + ' data-val="' + act.value + '">' + act.title + '</a>';
                contentallbtns = contentbtnsbefore + btns + contentbtnsafter;
                }
                MyFunction('',contentallbtns);
                }
     
                //building tags
                var startB = document.createElement('section');
                var myiddesc = 'iddesc-'+lastId ;
                startB.setAttribute('id', myiddesc );
                startB.setAttribute('class', 'thesection');
                document.getElementById('incontent').appendChild(startB);
                var startB2 = document.createElement('div');
                startB2.setAttribute('class', 'container');
                startB.appendChild(startB2);
                var startB3 = document.createElement('div');
                startB3.setAttribute('class', 'row MyRow');
                startB2.appendChild(startB3);
     
                document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc'));
                document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));
                });


    Cela génère la première fois une structure de ce type:
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section id="iddesc-0" class="thesection">
            <div class="container">
                <div class="row MyRow">
                    <div class="contentDesc">
                        <p>Hello World</p>(var3=descforalink)
                    </div>
                    <div class="contentLink">
                        <p>a link</p>
                    </div>
                </div>
            </div>
        </section>


    C'est ce que je veux ... mais quand une autre section est créée, avec des actions, cette structure apparaît:
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="contentDesc">
            <p>Hello World</p>(var3=descforalink)
        </div>
        <div class="contentLink">
            <a class="mybtn" data-val="banana">banana</a><a class="mybtn" data-val="orange">orange</a>
        </div>
        <section id="iddesc-1" class="thesection">
            <div class="container">
                <div class="row MyRow">   
                </div>
            </div>
        </section>


    J'ai donc l'impression que mon appendChild()ne fonctionne qu'une fois, je ne vois pas trop pourquoi et je me demande comment y remédier pour placer la div class="contentDesc" et la div class="contentLink" toujours dans sa section ? Auriez-vous une idée ?

  2. #2
    Rédacteur/Modérateur

    Si tu appendes un element existant du DOM en fait tu le déplaces…
    Si tu veux en appender un autre il faudra le cloner avant !
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Modérateur

    Bonjour,
    SpaceFrog tu es bien gentil de répondre à quelqu'un qui se fout royalement des réponses qu'on lui fait

  4. #4
    Futur Membre du Club
    Bonjour @NoSmoking... Si j'ai posté un nouveau poste c'est parce que celui-ci est plus complet et que le souci diffère... Tes réponses dans mes anciens postes étaient pertinentes mais n'a pas résolu mon problème... C'est pour cela que j'ai souhaité poster ici mon code plus détaillé qui avait évolué pour me permettre d'identifier mes erreurs...

  5. #5
    Futur Membre du Club
    Citation Envoyé par SpaceFrog Voir le message
    Si tu appendes un element existant du DOM en fait tu le déplaces…
    Si tu veux en appender un autre il faudra le cloner avant !
    Merci de ta réponse... je pensais que les éléments étaient créés dans le DOM dès que contentDATA recevait du contenu...et donc pouvoir modifier l'emplacement de mes balises juste avec appenChild()... donc si mon appenchild ne marche qu'une seule fois c'est parce que les autres sont des "répliques" (même structure niveaux balises) et doivent donc être clonées avant d'être déplacées, c'est bien ça ?

  6. #6
    Rédacteur/Modérateur

    A croire que NoSMo a raison …
    Je pense que tu auras ta réponse en relisant juste ma réponse ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Modérateur

    Citation Envoyé par cmoimoly
    Tes réponses dans mes anciens postes étaient pertinentes mais n'a pas résolu mon problème...
    et cela t'empêchais de donner des nouvelles, ne serait ce que par simple politesse ?

    Citation Envoyé par cmoimoly
    C'est pour cela que j'ai souhaité poster ici mon code plus détaillé qui avait évolué pour me permettre d'identifier mes erreurs...
    c'est la meilleur façon d’embrouiller tout le monde, aucune continuité dans la résolution d'un problème, plusieurs discussions ouvertes non finalisées cela n'aidera pas grand monde au final, à commencer par toi !

###raw>template_hook.ano_emploi###