Question

我在$skills_arr = array( '1' => 'Defence', '2' => 'Strength', '3' => 'Hitpoints', '4' => 'Ranged', '5' => 'Prayer', '6' => 'Magic', '7' => 'Cooking' ); //etc foreach($array[skillvalues] as $skills){ echo 'Skill Type:'.$skills_arr[$skills['id']]; echo 'Skill XP:'.$skills['xp']; echo 'Skill Rank:'.$skills['rank']; echo 'Skill Level:'.$skills['level']; }函数上运行了此函数（因此元素在运行之前就存在了）

window.onload

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

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

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

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

此外，我想在此图像上添加一个类我还应该注意，我没有使用button.appendChild is not a function标签，而是使用了以下标签：

<button>

Answer 1

getElementsByClassName返回一个collection，而不是单个按钮。集合类似于数组，但不完全相同。如果要使用.forEach遍历集合，则可以使用扩展运算符...将集合中的内容移动到数组中。然后，您可以使用此数组在其中的每个按钮上循环，然后使用.innerHTML将图像添加到每个按钮。

此外，要将类别添加到图像，您可以使用img.classList.add()

请参见下面的工作示例：

var img = new Image();
var buttons = [...document.getElementsByClassName('myButton')];
img.src = 'https://cdn.sstatic.net/Sites/stackoverflow/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附加到多个按钮。

Answer 2

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

您可以像这样向图像添加一个类。

img.classList.add("myImageClass");

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

2 个答案: