javascript - javascript - 在 getElementsByClassName 接收的元素内添加 div

Question

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

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

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

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

Answer 1

尝试这样的事情。

    // 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);

Answer 2

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

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

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

你需要一点 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，但我认为最好使用规则。

Answer 3

html:

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

javascript:

function addIcon(id) {
  var btn = document.getElementById(id);
  var div = document.createElement('div');
  div.style.className = 'icon';
  btn.appendChild(div);
}
addIcon('button1');