https: news.investforum.ru/feed/filter/full /? & channels = satellits There is json with news, there is an array of 20 objects, In each title, the preface (short text), the image to the article, and the article itself. I made it a small template. Each templeplayte has a Lern ​​Mor button, by clicking the button you need to open the entire article either in a new page or in this + there is a comment field, how to do this? Please help.

$.getJSON(my_url, function(data) { for ( i in data ) { var newsbox = $("<div>", {class: 'news-item'}), link = $( "<a>", { class: "news-item-btn", text: 'Learn more', id: "" + i}), infobox = $("<div>", {class: "news-item-info"}); $(document).find('.blog').append(newsbox) newsbox.append('<div class="news-item-img"><img src=' + data[i].Image + ">"); infobox.append("<h3>" + data[i].Title); infobox.append("<div>" + data[i].Description); infobox.append(link); newsbox.append(infobox); } })

    1 answer 1

    You can do this by first creating the DOM node we need, and then once we output it to the page. This will work faster than outputting each element in turn.

    PS Example worker, you can run it

     // Фейковое API для примера const url = 'https://jsonplaceholder.typicode.com/users'; $.getJSON(url, data => { // Создаем все нужные нам компоненты const $ul = $('<ul class="list" />'); const $li = $('<li class="list-item" />'); // Метод .map() вернет нам новый массив из компонентов li const list = data.map(user => { // клонируем нужные нам компонетны const item = $li.clone(); // Добавляем нужные значения item.text(user.name); // Возвращаем return item; }); // Добавляем массив из li в ul $ul.append(list); // У нас теперь есть готовый список который хранится в памяти JS, // осталось его отобразить // Выводим готовый DOM-узел на страницу $('#app').append($ul); }); 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div id="app"></div>