Как бы я не интерпретировал ваш вопрос, вам нужен способ:
- показать только первые n элементов;
- динамически добавляются новые элементы в начало списка сообщений;
- при добавлении обновите видимые элементы.
Предполагается, что слегка измененная версия вашего кода исправляет проблему с идентификатором / классом и добавляет контейнер для всех сообщений (на этот раз с правильным идентификатором):
<!DOCTYPE html>
<html>
<body>
<div id="posts-container">
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</div>
<script>
// ???
</script>
</body>
</html>
этот код поможет и дополнит и обновит видимость постов:
function showOnly(visible, query){
var elements = document.querySelectorAll(query);
for (var i = 0; i < elements.length; i++){
if (i < visible - 1){
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}
function publishPost(element, visible){
showOnly(visible, '#posts-container .posts-div')
var elements = document.querySelectorAll('#posts-container .posts-div');
element.style.display = 'block';
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}
}
Функция showOnly (которая вызывается с количеством отображаемых элементов и строкой, идентифицирующей элементы с querySelectorAll) сделает только видимыми первые n элементов, идентифицированных строкой. При необходимости вы можете использовать его независимо от остальной части кода.
Функция publishPost, с другой стороны, строго зависит от приведенного выше измененного HTML-кода (чтобы использовать его в другом месте, вам необходимо настроить строки, передаваемые в querySelector и querySelectorAll). В качестве первого аргумента берется элемент, который должен быть опубликован, а количество элементов, которые должны быть видны как второй. Затем он обновляет список сообщений, добавляя к нему новый, а также обновляет список сообщений.
Это пример кода, который использует его:
var elDiv = document.createElement('div');
var elH1 = document.createElement('h1');
var elP = document.createElement('p');
elDiv.classList = 'posts-div';
elH1.classList = 'post-title';
elP.classList = 'post';
elH1.innerText = 'some title';
elP.innerText = 'some text for the post';
elDiv.appendChild(elH1).appendChild(elP);
publishPost(elDiv, 2);
showOnly
Эта функция начинается с получения списка элементов, видимость которых должна управляться:
var elements = document.querySelectorAll(query);
затем просматривает список и проверяет каждый элемент:
for (var i = 0; i < elements.length; i++){
если он должен быть видимым, для свойства style.display устанавливается значение 'block':
if (i < visible){
elements[i].style.display = 'block';
в противном случае он устанавливается как «скрытый»:
else {
elements[i].style.display = 'none';
publishPost
Эта функция начинается с показа только n-1 элементов (потому что для этого потребуется добавить новый видимый элемент в начало списка):
showOnly(visible - 1, '#posts-container .posts-div')
затем он получает текущие сообщения:
var elements = document.querySelector('#posts-container .posts-div');
делает новый элемент видимым:
element.style.display = 'block';
наконец, он добавляет элемент в начало списка (различный синтаксис зависит от того, пуст ли список):
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}