使用 appendChild 将图像添加到元素会产生错误

Question

我的 window.onload 函数中有这个函数运行（因此元素在它运行之前就已经存在）

var img = new Image();
var button = document.getElementsByClassName('myButtons');

img.onload = function () {
    button.appendChild(img);
};

img.src = 'icons/buttons/fav.png'

但是，当我执行此操作时，我得到 return 的：

button.appendChild is not a function

此外，我想在此图片上添加 class 我还应该注意，我没有使用 <button> 标签，而是使用这个：

<span><a href="#" class="myButton" id="name">text</a></span>

Answer 1

那是因为 document.getElementsByClassName returns 类型 Array。 Array 没有名为 appendChild 的函数。您可能应该使用索引来访问按钮元素，例如 button[0].appendChild(img) 或使用 for 语句遍历所有按钮。

你可以像这样给图片添加一个class。

img.classList.add("myImageClass");

Answer 2

getElementsByClassNamereturns一个collection，不是一个按钮。集合类似于数组，但又不完全相同。如果您想使用 .forEach 遍历集合，您可以使用扩展语法 ... 将集合中的内容移动到数组中。使用此数组，您可以遍历其中的每个按钮，然后使用 .innerHTML 将图像添加到每个按钮。

此外，要向图像添加 class，您可以使用 img.classList.add()

请参阅下面的工作示例：

var img = new Image();
var buttons = [...document.getElementsByClassName('myButton')];
img.src = 'https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.png?v=c78bd457575a';

img.classList.add('img-btn');

img.onload = function() {
  buttons.forEach(button => {
    img.id = button.id + '1';
    button.innerHTML += img.outerHTML;
  });
};

.img-btn {
  height: 40px;
  width: 40px;
}

<span><a href="#" class="myButton" id="name1">Btn 1</a></span>
<span><a href="#" class="myButton" id="name2">Btn 2</a></span>
<span><a href="#" class="myButton" id="name3">Btn 3</a></span>

另请注意，使用 .appendChild() 会将 img 从一个按钮“移动”到另一个按钮，您需要使用 .innerHTML 将 img 附加到多个按钮。

使用 appendChild 将图像添加到元素会产生错误

Adding image to element using appendChild yields error

html

javascript

appendchild