Блог

Для этого блока кода

 $(document).ready(() => {
    for (let i = 0; i < 10; i  ) {
      $("#main").append(factory());
    }
  });
  

это покажет изображение:

 function factory() {
    return $('<image class="champ-icon rounded-circle" src="resources/irelia.jpg" />');
}
  

пока это не

 function factory() {
    let $champIcon = $(document.createElement("image"))
      .addClass("champ-icon rounded-circle")
      .attr("src", "resources/irelia.jpg");
    return $champIcon;
}
  

Я также использую Bootstrap 4.

Страница в настоящее время является просто статическим макетом. Я хочу динамически создавать элементы из данных, предоставленных ему локальным сервером.

Я буквально только что возился с HTML / CSS и jQuery на выходных, поэтому я не уверен, что здесь пошло не так. Разве обе функции не должны возвращать один и тот же объект jQuery?

Спасибо!

Класс CSS

 .champ-icon {
        width: 100px;
        height: 100px;
      }
  

Редактировать: создание его с помощью обычного javascript также работает.

 function factory() {
        let img = new Image();
        img.src = "resources/irelia.jpg";
        img.className = "champ-icon rounded-circle";
        return img;
  

Это потому, что вы пытаетесь программно создать <image> элемент в html, который … не существует. Чтобы вставить элемент на страницу, вы должны использовать <img src=""> , а не <image...> . Измените эту строку

 let $champIcon = $(document.createElement("image"))
  

Для

 let $champIcon = $(document.createElement("img"))
  

И это должно сработать.