js无后端实现点击加载查看更多（提示SEO友好度）

<button id="viewMoreButton">查看更多</button>
<div id="articleList">
    <!-- 这里是原先隐藏的文章列表，初始显示的前5条 -->
    <div>文章1</div>
    <div>文章2</div>
    <div>文章3</div>
    <div>文章4</div>
    <div>文章5</div>
    
    <!-- 隐藏的文章列表，点击按钮后显示 -->
    <div style="display:none;">文章6</div>
    <div style="display:none;">文章7</div>
    <div style="display:none;">文章8</div>
    <div style="display:none;">文章9</div>
    <div style="display:none;">文章10</div>
</div>

document.getElementById('viewMoreButton').addEventListener('click', function() {
    var articleList = document.getElementById('articleList');
    var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
    
    // 将隐藏的文章显示出来
    for (var i = 0; i < hiddenArticles.length; i++) {
        hiddenArticles[i].style.display = 'block';
    }
    
    // 可以选择之后移除按钮或者改变按钮文本
    this.remove(); // 移除按钮
    // 或者
    this.innerText = '已查看全部';
});

#articleList div:nth-child(n+11) {
  display: none;
}

document.getElementById('viewMoreButton').addEventListener('click', function() {
    var articleList = document.getElementById('articleList');
    var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
    var hiddennum = hiddenArticles.length;
    var num = 10;
    if (hiddennum==0){
        alert('没有更多了');
    } else {
        if (hiddennum<=10) {
            num = hiddennum;
            this.innerText = '已查看全部';
        }
        for (var i = 0; i < num; i++) {
            hiddenArticles[i].style.display = 'block';
        }
    }
});