Обработка табуляции фокуса клавиатуры на динамически заполняемом содержимом ⇐ Jquery

[Anonymous]

У меня есть список сообщений в блоге с кнопкой «Загрузить еще». Для доступности я хотел бы изменить положение фокуса клавиатуры после добавления новых сообщений, чтобы вместо перехода к элементам под списком сообщений нажатие вкладки после загрузки дополнительных сообщений фокусировало первое сообщение в новых сообщениях, которые были добавлены в в список.
Моя мысль заключалась в том, чтобы получить последнюю статью в списке при нажатии кнопки «Загрузить еще», а затем сфокусировать ссылку внутри нее после дополнительных сообщений. загружаются. Таким образом, когда пользователь снова нажмет вкладку, он перейдет к следующему сообщению в списке (четвертое сообщение в моем примере). Я предполагаю, что это не работает, потому что заменяется весь HTML-код почтового контейнера. Есть ли способ сделать это, учитывая, что весь HTML-код заполняется динамически каждый раз при нажатии кнопки «Загрузить еще»?

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

let additionalPosts = `
[url=#]
Fourth Post
Lorem ipsum dolor sit amet
[/url]

[url=#]
Fifth Post
Lorem ipsum dolor sit amet
[/url]

[url=#]
Sixth Post
Lorem ipsum dolor sit amet
[/url]

`;

$(function() {
$('.load-more').click(function() {
const $lastPost = $('.post-container article').last();
//console.log($lastPost);
$('.post-container').html($('.post-container').html() + additionalPosts);
$('a', $lastPost).focus();
$(this).hide();
});
});

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

.post-container {
display:flex;
gap:1.5rem;
flex-wrap:wrap;
margin-bottom:3rem;
}

article {
max-width:33%;
}

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

Post List

[url=#]
First Post
Lorem ipsum dolor sit amet
[/url]

[url=#]
Second Post
Lorem ipsum dolor sit amet
[/url]

[url=#]
Third Post
Lorem ipsum dolor sit amet
[/url]


Load More

Some additional links
[url=#]Another Link[/url]
[url=#]Another Link[/url]
[url=#]Another Link[/url]

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