Как добавить подразделы в HTML-файл из JavaScript ⇐ Jquery

[Anonymous]

`Привет всем, меня зовут Барри, и я новичок в программировании. Сильно боролся с этой конкретной проблемой. Меня попросили заполнить общий список записей
Для этого дела вам необходимо собрать новые данные для общих записей Билли. В отличие от TODO 4, в DOM нет раздела или неупорядоченного списка для записей, поэтому для создания этих элементов также необходимо использовать jQuery.
a. Создайте записи и добавьте их под разделом записей с самым высоким рейтингом на боковой панели. Как этого можно добиться с помощью jQuery?
b. Создайте файл , придайте ему стиль и добавьте в .
c. Добавьте стиль для каждой записи в массиве записей. Какие методы lodash могут вам здесь помочь?
d. Добавьте отдельно название, исполнителя, выпуск и год каждой записи. Дайте им класс на основе их ключа в объекте.
e. Добавьте правила стиля CSS в файл css/site.css, чтобы стилизовать элементы списка. Могут ли эти правила стиля применяться к элементам списков как в списках с самым высоким рейтингом, так и в списках записей? Как этого добиться с помощью селекторов/правил CSS и jQuery?
Результирующий HTML-код должен выглядеть примерно так:

Код: Выделить всё

[list]
[*]
Title: Eastern Rebellion
Artist: Cedar Walton
Release: Timeless
Year: 1976


[/list]

Код: Выделить всё

//However my HTML file looks like this


[img]images/billy/billy-0.jpg[/img]


Top Rated
[list][/list]
[*]Voice in the Night
[*]The Shape of Jazz to Come
[*]Like Sonny
[*]Go
[*]The Water Is Wide


[list][/list]
Eastern Rebellion
Cedar Walton
Timeless
1976
Soul Food
Bobby Timmons
Prestige
1966
A Swingin' Affair
Dexter Gordon
Blue Note
1962
Rejoice
Pharoah Sanders
Theresa
1981



//this is where my code in the js file begins:

const onReady = (data) => {
// YOUR CODE BELOW HERE //

$('#section-bio').css('color', 'brown');
$('#section-quotes').css('color', 'blue');
/* eslint-enable */
// TO DO 4 ////

const topRated = data.discography.topRated;

let newSection = document.createElement('section')
topRated.forEach((recording) => {
$('#section-top-rated').append(`[*]${recording.title}` );
//let topR = $('#section-top-rated').append(`[*]${recording.title}` );
});
const recordings = data.discography.recordings;

$(``).appendTo('#section-top-rated');
//$(`[list][/list]`).appendTo('#section-recordings')
//$(`[*]`).appendTo('#list-recordings').appendTo('#list-recordings')
$('#list-recordings').append(`[*]`)
$(`#section-recordings`).append(`[list][/list]`)
//$('#list-recordings').append(`[*]`)

recordings.forEach((element) => {
$(`[*]`)
$('#section-recordings').append(`${element.title}` )
$('#section-recordings').append(`${element.artist}` )
$('#section-recordings').append(`${element.release}` )
$('#section-recordings').append(`${element.year}` )
})

const uL = document.createElement('ul id="list-recordings"  class="list-recordings"')

uL.appendTo(`#section-recordings`)

//let newSection = document.createElement('section');
//$()
// const recordings = data.discography.recordings;
//recordings.forEach(songs){

// }
// YOUR CODE ABOVE HERE //
};

Все, что я пробовал, закомментировано с помощью маркеров //. Я застрял над этой проблемой весь день. Я не знаю почему, но мои списки [*] не отображаются, и мне кажется, что это значительно усложняет решение этой проблемы из-за их отсутствия; я не вижу, где он находится, поэтому не знаю, как его переместить. Просто примечание; фактический data.discography.recordings ссылается на массив объектов. Любой уровень помощи поможет, даже просто слова поддержки. Приветствую всех, кто пытается помочь мне с этой проблемой. Если бы я мог хотя бы понять, почему не могу найти , это было бы огромным шагом. ура.`

Подробнее здесь: https://stackoverflow.com/questions/790 ... javascript