Appenchild() : I want the content to always be moved to the same place ... but it only works once

JavaScript
1

Hello, I am new to javascript and I am not used to creating nodes…
So, I have a <div id="incontent"></div> in which I am generating elements using javascript… here is my script :

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'));
            });

This generates the first time a structure of this type and this is what I want:

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

but when another section is created, with other content, this structure appears:

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

So my div class="contentDesc" and my div class="contentLink" is well created … but is no longer the child of my div class="row MyRow" .
appendChild() only works once (when the first section is created)… I don’t understand, because for me, the tags are created each time via MyFunction, therefore present in the DOM, so appendChild () should move my items every time, but no :confused:
So, how can i change that? Always place my div div class="contentDesc" and class="contentLink" in the div class="row MyRow" ? Thank you for your help…

1 Like
2

Mdn docs about the query selector can be helpful

And maybe try to shorten and tidy up the code, I got confused reading it.

3

I modified … I hope this is better :wink:

4

You are very good advice misterybodon. Thank you very much for directing me to the querySelector, that was indeed my problem, I was not targeting enough the elements I wanted to move :+1:

1 Like
5

Hey! You’re welcome, I couldn’t check the code because I was bit tired for that.

Good luck for your next steps. Feel free to ask me by message too. I like to solve problems.