Javascript 如何将函数应用于具有相同类的所有新元素，但仅应用于新创建的元素？（JS功能）

我在页面上有一个元素列表，我只想在新创建的元素上运行一个函数。问题是，当我再次调用该函数时，它会将该函数应用于具有相同类的所有元素

加载1时创建的

加载时创建的元素2
动态创建1
动态创建2

---

在上面的示例代码中，我有一个类为

element

的元素列表。我想调用一个只在动态创建的元素上运行的函数，即加载页面时不在DOM中运行的函数

您可以使用

MutationObserver

API来监听对元素子列表的更改。下面的示例演示了一种可能的用法。大部分内容都是无耻地从网站上复制的

const targetNode=document.querySelector（'ul'）；
常量配置={
属性：false，
儿童名单：是的，
子树：false
};
//观察到突变时执行的回调函数
常量回调=函数（mutationsList，observer）{
for（让突变列表突变）{
if（mutation.type==='childList'）{
log（'已添加或删除子节点'）；
}
}
};
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（回调）；
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；
///
document.querySelector（'button'）。addEventListener（'click'，（）=>{
const li=document.createElement（'li'）；
li.textContent='动态添加'；
li.classList.add（'element'）；
文件。查询选择器（“ul”）。追加子项（li）；
});

加载1时创建的

加载时创建的元素2

添加更多元素
我的评论示例。
您可以在正确的时间添加/删除另一个类，这样CSS将只为上次批量添加的项着色


const add\u items=text=>{
const previous_items=document.querySelectorAll（'li.dynamic'）；
排列
.来源（以前的项目）
.forEach（item=>item.classList.remove（'dynamic'）；
const new_items=text.map（text=>{
const new_item=document.createElement（'li'）；
new_item.textContent=文本；
new_item.classList.add（'element'，'dynamic'）；
返回新项目；
});
const list=document.querySelector（'ul'）；
new_items.forEach（item=>list.appendChild（item））；
};
document.querySelector（'#add_1'）。addEventListener（'click'，event=>{
添加_项（['动态创建3']）；
});
document.querySelector（'#add_2'）。addEventListener（'click'，event=>{
添加项目([
'动态创建4'，
“动态创建5”
]);
});
.element{
背景颜色：浅蓝色；
}
.动态{
背景颜色：浅绿色；
}

加载1时创建的

加载时创建的元素2
动态创建1
动态创建2

加1
添加2
感谢您的帮助，我发现这个问题最有帮助的解决方案是：-每次运行函数时，我都会删除原始类名并添加一个新的类名，现在当函数运行时，会搜索具有原始名称的类名，因此只有具有原始名称的元素才会更改

以下是改变元素的魔力：

$('.element').removeClass('element').addClass('element-processed');

什么样的功能？它做什么，接收元素并使用它做些什么？在动态创建的元素上使用第二个类名，这样您就可以区分差异，从而只选择新的元素。所以
之类的东西。感谢您的回复，该功能是将文本颜色更改为添加的新元素。如何以及何时添加新元素？在这种情况下，您已经单独引用了新元素。您只需要对它们调用函数。具体如何做到这一点取决于您尚未向我们展示的代码；您调用的函数和AJAX请求逻辑。