在Javascript中选择动态添加的类

我会尽量使问题简短明了。我将非常感谢我能得到的每一个帮助，但非常重要的是，这是一个香草Javascript解决方案。来吧

我创建了一些元素（div和p），并使用javascript向这些动态创建的元素添加了类。因此，当在浏览器中打开HTML时，这些元素将基于某些操作添加

以下是HTML：

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

因此，创建的所有这些元素都被附加在一起，并最终添加到HTML文件中的div容器中。 以下是添加这些内容后控制台中HTML文件的外观：

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

促进能源效率

现在的问题是，当我尝试查询选择这些动态创建的元素及其添加的类时，我会得到

null

。因此，我对他们无能为力。例如，当我尝试选择

工作区div

时，即使现在我

---

感谢您阅读到这一点，我将非常感谢这里的一切帮助。谢谢大家：）

如果使用模板进行设置，可以大大简化脚本。在HTML5和现代浏览器中，您可以为此使用新的

元素。由于此元素尚未在所有浏览器中可靠地工作，因此我在此处使用了与之完全相同的

：

const block=document.getElementById（'tmpl'）.innerHTML，
parr=[“促进能源效率”，
“使产品可修复/可持续”，
“做其他有用的事情”
];
document.querySelector（“工作容器外部”）
.innerHTML=parr.map（p=>block.replace（“@”，p））.join（
）；
//扫描新结构中的所有'p'元素：
console.log（[…document.querySelectorAll（'p'）].map（p=>p.textContent.join（“\n”））
div{背景色：#8882；填充：10px}

@

对我有效：？尝试在关闭标记之前放置sript…（我认为这不是问题所在，但只是以防万一…我认为页面需要一些时间来加载，您必须等待所有元素被创建并填充数据…）您从未定义过
workContainerOuter
。例如，
const workContainerOuter=document.querySelector（“.work container outer”）
。我建议您先添加父元素，然后再往下操作，这样似乎更容易跟踪。请发布您的脚本，让查询选择所需的元素和/或类。@zer00ne我实际上在整个循环之外定义了workContainerOuter。@CharlesIkulayo随后更新您的问题。
<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>