Selecting dynamically added classes in Javascript

Question

I'll try to keep the question short and clear as mush as possible. I will really appreciate every help I can get but really important, is a solution in vanilla Javascript. So here come;

I created some elements (div and p) and added classes to these dynamically created elements using javascript. So that when the HTML is opened in the browser, these elements are added based on some actions.

Here is the HTML below:

<div class="work-container-outer"></div>

That is all the HTML there is.

Here is the Javascript code used to add the elements and the classes;

for (const items of areaOfWork) {
    //create elements---------------------------------------------------------------
    let workContainer, workAreaDiv, workTitle, pTitle;
    workContainer = document.createElement('div');
    workAreaDiv = document.createElement('div');
    workTitle = document.createElement('div');
    pTitle = document.createElement('p');

    //add classes--------------------------------------------------------------------
    workContainer.classList.add('work-container');
    workAreaDiv.classList.add('work-area-div');
    workTitle.classList.add('work-title');

    //append as necessary------------------------------------------------------------
    workTitle.append(pTitle);
    workAreaDiv.append(workTitle);
        //append workAreaDiv
    workContainer.append(workAreaDiv);
        //append the above to the main from the selector
    workContainerOuter.append(workContainer);

    //fill in with content from the database------------------------------------------
    pTitle.innerHTML = items.title;
}

So all these elements created were appended together and finally added to the div container in the HTML file. Here is what the HTML file looks like in the console after these stuffs has been added:

<div class="work-container-outer">
    <div class="work-container">
        <div class="work-area-div">
            <div class="work-title">
                <p>Promoting energy efficiency</p>
            </div>
        </div>
    </div>
</div>

The issue now is, when I try to queryselect these dynamically created elements with their added classes, I get null . Therefore, I can't do anything with them. For example, when I try to select work-area-div , it returns null even though now i

Thank you for reading up to this point and I will really appreciate every assistance here. Thank you all:)

Answer 1

You can simplify your script considerably if you set it up with a template. In HTML5 and modern browsers you can use the new <template> element for this. As this element does not yet work reliably in all browsers, I have used the <script> here in exactly the same way:

 const block=document.getElementById('tmpl').innerHTML, parr=["Promoting energy efficiency", "Make products repairable/sustainable", "Do other useful stuff" ]; document.querySelector(".work-container-outer").innerHTML=parr.map(p=>block.replace("@",p)).join("<hr>"); // scan the new structure for all `p` elements: console.log( [...document.querySelectorAll('p')].map(p=>p.textContent).join("\n"));

 div {background-color:#8882; padding:10px}

 <div class="work-container-outer"></div> <script type="text" id="tmpl" ><div class="work-container"> <div class="work-area-div"> <div class="work-title"> <p>@</p> </div> </div> </div> </script>

The generated elements can be found just like any other elements in the DOM, as you can see from the console output.