Добавление изображения к элементу с помощью appendChild приводит к ошибке - PullRequest
Новая
       8

Добавление изображения к элементу с помощью appendChild приводит к ошибке

0 голосов
/ 27 января 2019

Эта функция выполняется в моей функции 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>, а вместо этого использую это:

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

Ответы [ 2 ]

0 голосов
/ 27 января 2019

getElementsByClassName возвращает коллекцию , а не одну кнопку. Коллекция похожа на массив, но не совсем то же самое. Если вы хотите перебрать коллекцию с помощью .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() будет «перемещаться» изображение из кнопки в кнопку, вам нужно использовать .innerHTML, чтобы добавить изображение в несколько кнопок.

0 голосов
/ 27 января 2019

Это потому, что document.getElementsByClassName возвращает тип Array. Array не имеет функции с именем appendChild. Вам, вероятно, следует использовать индекс для доступа к элементу кнопки, например button[0].appendChild(img), или использовать оператор for для циклического перебора всех кнопок.

Вы можете добавить класс к изображению, как это.

img.classList.add("myImageClass");

...