为了提示SEO友好度，并且避免调用后端接口给服务器造成负担，可以使用js无后端实现点击加载查看更多。比如HTML中源码存在60条记录，预先显示20条记录，点击“查看更多”一次追加10条，最后一次后按钮文本改为“已查看全部”。

在JavaScript中，你可以使用以下步骤来实现点击查看更多的功能：

• 确定触发点击事件的元素和需要显示的文章列表。

• 为点击事件绑定一个事件监听器。

• 在事件处理函数中，将原先隐藏的文章列表添加到页面上。

以下是简单实现这一功能的示例代码：

在这个例子中，初始时显示前5条文章，点击按钮后会显示隐藏的文章列表，并且可以选择是否移除按钮或者更改按钮文本。

css实现列表超过10条隐藏

为什么html中不使用上述方式，而使用style=""来隐藏列表。因为js中for遍历的时候使用style=""来标记隐藏的列表。

HTML中的列表数量要多一些，js代码如下