Discussion :

[cmoimoly]

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 ?

[SpaceFrog]

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 !

[NoSmoking]

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

• Insertion balise html avec innerHTML
• Modifier/déplacer une balise html existante dans le DOM

[cmoimoly]

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

[cmoimoly]

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 ?

[SpaceFrog]

A croire que NoSMo a raison …
Je pense que tu auras ta réponse en relisant juste ma réponse ...

[NoSmoking]

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 ?

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 !