JavaScript-在由getElementsByClassName接收的元素內添加div

Question

我真的是初學者，如果這個問題很基本，請您諒解。 我有一個帶有背景圖像的按鈕，我想在按鈕內插入一個小的小圖標，以顯示在其背景圖像上。

現在，我以這種方式獲取button元素：

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將一個圖像放置在另一個圖像之上（例如位於左上方）。 例如

<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，但最好使用我認為的規則。