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

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

Answer 3

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

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

<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，但最好使用我认为的规则。

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

3 个答案: