Is there a way to load html generated with javascript in a specific div?

Question

I have a javascript function that generates some html content. However the event listener i'm using load the content at the end of the page.*I'd like it to be loaded in a specific div.

    window.addEventListener("DOMContentLoaded", (event) => {
    createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>);
});

I also tried the onload attribute in the div ... but stll doesn't work:

<div id="bdd"onload="createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>);"></div>

The createForm function:

function createForm(arr){

    ct++;
    de++;
    na++;

    const form = document.getElementById("formed");
    const divi = document.getElementById("bdd");
    arr.forEach(element => {   
        const a = element.training_diploma;
        const b = element.training_school;
        const c = element.training_level;
        const d = element.training_start_date;
        const e = element.training_end_date;

        const training_diploma = document.createElement('input');
        training_diploma.setAttribute('value', a)
        training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]'))
        training_diploma.required = true

        const training_school = document.createElement('input');
        training_school.setAttribute('value', b)
        training_school.setAttribute('name','saved_training['.concat(ct,'][training_school]'))
        training_school.required = true

        const divSelect = document.createElement('div');
        divSelect.setAttribute('class', 'select')

        const training_level = document.createElement('select');
        training_level.setAttribute('value', c)
        training_level.setAttribute('id', 'rec_mode')
        training_level.setAttribute('name','saved_training['.concat(ct,'][training_level]'))
        training_level.required = true  

            const option1 = document.createElement('option');
            option1.disabled = true
            option1.innerHTML='-- Type de diplôme --';

            const option2 = document.createElement('option');
            option2.innerHTML='Formation' 
            if (option2.innerHTML == c) {
                option2.selected = true
            } 

            const option3 = document.createElement('option');
            option3.innerHTML='Brevet'
            if (option3.innerHTML == c) {
                option3.selected = true
            } 
            const option4 = document.createElement('option');
            option4.innerHTML='Bac'
            if (option4.innerHTML == c) {
                option4.selected = true
            } 
            const option5 = document.createElement('option');
            option5.innerHTML='Bac +1'
            if (option5.innerHTML == c) {
                option5.selected = true
            } 
            const option6 = document.createElement('option');
            option6.innerHTML='Bac +2'
            if (option6.innerHTML == c) {
                option6.selected = true
            } 
            const option7 = document.createElement('option');
            option7.innerHTML='Bac +3'
            if (option7.innerHTML == c) {
                option7.selected = true
            } 
            const option8 = document.createElement('option');
            option8.innerHTML='Bac +4'
            if (option8.innerHTML == c) {
                option8.selected = true
            } 
            const option9 = document.createElement('option');
            option9.innerHTML='Bac +5'
            if (option9.innerHTML == c) {
                option9.selected = true
            } 

            const option10 = document.createElement('option');
            option10.innerHTML='Doctorat'
            if (option10.innerHTML == c) {
                option10.selected = true
            } 

        const training_start_date = document.createElement('input');
        training_start_date.setAttribute('type', 'month')
        training_start_date.setAttribute('value', d)
        training_start_date.setAttribute('name','saved_training['.concat(ct,'][training_start_date]'))
        training_start_date.required = true

        const training_end_date = document.createElement('input');
        training_end_date.setAttribute('type', 'month')
        training_end_date.setAttribute('value', e)
        training_end_date.setAttribute('name','saved_training['.concat(ct,'][training_end_date]'))
        training_end_date.required = true

        const div = document.createElement('div');
        div.setAttribute('id', 'row-'+ct++)
        div.setAttribute('class', 'training_container')

        const del = document.createElement('a');
        del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')'))
        del.setAttribute('class','remove_button')
        del.innerHTML='- Supprimer cette formation'
        

        form.appendChild(divi);
        divi.appendChild(div);
        div.appendChild(training_diploma);
        div.appendChild(training_school);
        div.appendChild(divSelect);
        divSelect.appendChild(training_level);
            training_level.appendChild(option1);
            training_level.appendChild(option2);
            training_level.appendChild(option3);
            training_level.appendChild(option4);
            training_level.appendChild(option5);
            training_level.appendChild(option6);
            training_level.appendChild(option7);
            training_level.appendChild(option8);
            training_level.appendChild(option9);
            training_level.appendChild(option10);                
        div.appendChild(training_start_date);
        div.appendChild(training_end_date);
        div.appendChild(del);
    });
}

window.addEventListener("DOMContentLoaded", (event) => {
    createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>);
});

Any idea ? Thanks a lot from France !

Answer 1

Found the answer !

basically, as everyone said, a "return" was missing ! Just needed to figure out where to place !

function createForm(arr){

ct++;
de++;
na++;

const form = document.getElementById("formed");
const divi = document.getElementById("bdd");
arr.forEach(element => {   
    const a = element.training_diploma;
    const b = element.training_school;
    const c = element.training_level;
    const d = element.training_start_date;
    const e = element.training_end_date;

    const training_diploma = document.createElement('input');
    training_diploma.setAttribute('value', a)
    training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]'))
    training_diploma.required = true

    const training_school = document.createElement('input');
    training_school.setAttribute('value', b)
    training_school.setAttribute('name','saved_training['.concat(ct,'][training_school]'))
    training_school.required = true

    const divSelect = document.createElement('div');
    divSelect.setAttribute('class', 'select')

    const training_level = document.createElement('select');
    training_level.setAttribute('value', c)
    training_level.setAttribute('id', 'rec_mode')
    training_level.setAttribute('name','saved_training['.concat(ct,'][training_level]'))
    training_level.required = true  

        const option1 = document.createElement('option');
        option1.disabled = true
        option1.innerHTML='-- Type de diplôme --';

        const option2 = document.createElement('option');
        option2.innerHTML='Formation' 
        if (option2.innerHTML == c) {
            option2.selected = true
        } 

        const option3 = document.createElement('option');
        option3.innerHTML='Brevet'
        if (option3.innerHTML == c) {
            option3.selected = true
        } 
        const option4 = document.createElement('option');
        option4.innerHTML='Bac'
        if (option4.innerHTML == c) {
            option4.selected = true
        } 
        const option5 = document.createElement('option');
        option5.innerHTML='Bac +1'
        if (option5.innerHTML == c) {
            option5.selected = true
        } 
        const option6 = document.createElement('option');
        option6.innerHTML='Bac +2'
        if (option6.innerHTML == c) {
            option6.selected = true
        } 
        const option7 = document.createElement('option');
        option7.innerHTML='Bac +3'
        if (option7.innerHTML == c) {
            option7.selected = true
        } 
        const option8 = document.createElement('option');
        option8.innerHTML='Bac +4'
        if (option8.innerHTML == c) {
            option8.selected = true
        } 
        const option9 = document.createElement('option');
        option9.innerHTML='Bac +5'
        if (option9.innerHTML == c) {
            option9.selected = true
        } 

        const option10 = document.createElement('option');
        option10.innerHTML='Doctorat'
        if (option10.innerHTML == c) {
            option10.selected = true
        } 

    const training_start_date = document.createElement('input');
    training_start_date.setAttribute('type', 'month')
    training_start_date.setAttribute('value', d)
    training_start_date.setAttribute('name','saved_training['.concat(ct,'][training_start_date]'))
    training_start_date.required = true

    const training_end_date = document.createElement('input');
    training_end_date.setAttribute('type', 'month')
    training_end_date.setAttribute('value', e)
    training_end_date.setAttribute('name','saved_training['.concat(ct,'][training_end_date]'))
    training_end_date.required = true

    const div = document.createElement('div');
    div.setAttribute('id', 'row-'+ct++)
    div.setAttribute('class', 'training_container')

    const del = document.createElement('a');
    del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')'))
    del.setAttribute('class','remove_button')
    del.innerHTML='- Supprimer cette formation'
    

    form.appendChild(divi);
    divi.appendChild(div);
    div.appendChild(training_diploma);
    div.appendChild(training_school);
    div.appendChild(divSelect);
    divSelect.appendChild(training_level);
        training_level.appendChild(option1);
        training_level.appendChild(option2);
        training_level.appendChild(option3);
        training_level.appendChild(option4);
        training_level.appendChild(option5);
        training_level.appendChild(option6);
        training_level.appendChild(option7);
        training_level.appendChild(option8);
        training_level.appendChild(option9);
        training_level.appendChild(option10);                
    div.appendChild(training_start_date);
    div.appendChild(training_end_date);
    div.appendChild(del);
});
 return divi;
}

window.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById("training").appendChild(createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>));
});