Javascript 如何向类的多个实例添加div？

我一直在使用一些代码将div添加到我的按钮中，以便使用下面的代码进行样式设置，它在按钮的第一个实例上运行良好，但之后它不会将div添加到任何按钮中？我错过了什么？我很愿意学习，并尝试用谷歌搜索，但我已经深深地陷入了一些我还没有完全理解的事情中。如果任何答案都是纯Javascript而不是jQuery，那就太好了

JS

//父元素
const el=document.querySelector（“.myclass”）；
//创建新元素
const newEl=document.createElement（“span”）；
newEl.classList=“cm bg”；
const newEl2=document.createElement（“span”）；
newEl2.classList=“cm-base”；
//在元素之前插入新元素
el.之前（newEl）；
el.之前（newEl2）；

HTML

---

查询选择器

查找文档中的第一个匹配元素。因此，您的代码总是将元素添加到文档中的第一个

.myclass

如果要查找所有匹配元素并更新它们，请使用

querySelectorAll

并循环搜索结果：

const list = document.querySelectorAll(".elementor-button-wrapper");
for (const el of list) {
    // Create New Element
    const newEl = document.createElement("span");
    newEl.className = "cm-bg";      // *** See comment on question
    const newEl2 = document.createElement("span");
    newEl2.className = "cm-base";   // *** See comment on question

    // Insert New Element AFTER an Element
    el.before(newEl);
    el.before(newEl2);
}

实例：

const list=document.querySelectorAll（“.elementor按钮包装器”）；
用于（列表常数）{
//创建新元素
const newEl=document.createElement（“span”）；
newEl.className=“cm bg”//***参见对问题的评论
const newEl2=document.createElement（“span”）；
newEl2.className=“cm base”//***请参见对问题的评论
//在元素后插入新元素
el.之前（newEl）；
el.之前（newEl2）；
}

.cm bg:：之后{
内容：“cm bg”
}
.cm基：：之后{
内容：“cm基础”
}

---

查询选择器

查找文档中的第一个匹配元素。因此，您的代码总是将元素添加到文档中的第一个

.myclass

如果要查找所有匹配元素并更新它们，请使用

querySelectorAll

并循环搜索结果：

const list = document.querySelectorAll(".elementor-button-wrapper");
for (const el of list) {
    // Create New Element
    const newEl = document.createElement("span");
    newEl.className = "cm-bg";      // *** See comment on question
    const newEl2 = document.createElement("span");
    newEl2.className = "cm-base";   // *** See comment on question

    // Insert New Element AFTER an Element
    el.before(newEl);
    el.before(newEl2);
}

实例：

const list=document.querySelectorAll（“.elementor按钮包装器”）；
用于（列表常数）{
//创建新元素
const newEl=document.createElement（“span”）；
newEl.className=“cm bg”//***参见对问题的评论
const newEl2=document.createElement（“span”）；
newEl2.className=“cm base”//***请参见对问题的评论
//在元素后插入新元素
el.之前（newEl）；
el.之前（newEl2）；
}

.cm bg:：之后{
内容：“cm bg”
}
.cm基：：之后{
内容：“cm基础”
}

您应该将其添加到您的类列表中，您是否也可以共享您的htmlNote：尽管它确实有效，但不要使用

newEl.classlist=“cm bg”。使用
newEl.className=“cm-bg”
（
className
而不是
classList
）或
newEl.classList.add（“cm bg”）
（
classList
上的
add
方法）取而代之。@Alex-信不信由你，
el.classList=“x”
有效，甚至是指定的行为。可悲的是……）我的html是@Matu-请使用问题标签下的“编辑”链接来改进问题，而不是在评论中发布代码/标记。您应该将其添加到您的类列表中，您是否也可以共享您的html注意：尽管它确实有效，但不要使用
newEl.classlist=“cm bg”。使用
newEl.className=“cm-bg”
（
className
而不是
classList
）或
newEl.classList.add（“cm bg”）
（
classList
上的
add
方法）取而代之。@Alex-信不信由你，
el.classList=“x”
有效，甚至是指定的行为。可悲的是……）我的html是@Matu-请使用问题标签下的“编辑”链接来改进问题，而不是在评论中发布代码/标记。我添加了这个，它仍然只影响我的第一个问题实例button@Matu-恐怕你应用得不太正确。我会做一个活生生的例子，但是在你的HTML中没有类
myclass
的元素，所以我不知道你想在附近添加哪个元素。我在这里测试它，我更新了原始帖子，也包括了class@Matu-我一直假设此代码运行是为了响应某个事件。您是否试图一次添加到代码中的多个按钮？我已经添加了这个按钮，它仍然只影响我的第一个实例button@Matu-恐怕你应用得不太正确。我会做一个活生生的例子，但是在你的HTML中没有类
myclass
的元素，所以我不知道你想在附近添加哪个元素。我在这里测试它，我更新了原始帖子，也包括了class@Matu-我一直假设此代码运行是为了响应某个事件。您是否试图一次添加到代码中的多个按钮？