javascript—在getElementsByClassName接收的元素中添加div

我真的是一个初学者，如果这个问题很基本，我很抱歉。 我有一个带有背景图像的按钮，我想在按钮内插入一个小图标，显示在其背景图像上

现在，我以这种方式获取button元素：

elements = document.getElementsByClassName("test");
var div = document.createElement("innerdiv");
div="";
var element = elements[0];

我想我需要做的就是在按钮div中插入一个div 但是我如何才能从这里做到这一点呢？

html:

<div class="button" id="button1"></div>

---

试试这样的

    // getElementsByClassName returns a list, so we'll take the first value
    var firstMatch = document.getElementsByClassName('className')[0];

    var newDiv = document.createElement('div');
    // (Here is where you would set the id & attributes of the new div)
    firstMatch.appendChild(newDiv);

---

不能将div作为按钮元素的子元素，它是无效的HTML。浏览器要么抛出错误，要么可能将div放在按钮后面

一个按钮可以有多个IMG元素作为子元素，您可以使用CSS将一个图像置于另一个图像之上（例如位于左上角）。e、 g

您还需要一些CSS支持：

.test {
  /* In addition to current rules, if any */
  position: relative;
}

/* make the icon sit in the top left corner */
.buttonIcon {
  position: absolute;
  top: 0;
  left: 0;
}

---

您可以应用脚本中硬编码的CSS，但我认为最好使用规则。

请发布您的代码，以便我们提供帮助。提示，

getElementsByClassName

返回节点列表。查看此处了解更多信息我只能按类使用getelement，因为按钮只有类您是否尝试过使用CSS伪元素？OP正在尝试在按钮中插入img元素。插入div无效。

<button  style="position: relative;" class="test">
  <img src="b.jpg" alt="">
  <img src="a.gif" alt="" style="position: absolute; left:0; top: 0;">
</button>

var elements = document.getElementsByClassName('test');
var img = document.createElement('img');
img.src = 'a.jpg';
img.alt = 'icon';
img.className = 'buttonIcon';
elements[0].appendChild(img);

.test {
  /* In addition to current rules, if any */
  position: relative;
}

/* make the icon sit in the top left corner */
.buttonIcon {
  position: absolute;
  top: 0;
  left: 0;
}