Javascript：仅在特定的 .html 文件上将元素附加到类

Question

JS 新手。假设我有一个index.html 页面，其中有一个<div class="posts">。我还有一个about.html 页面，其中有一个<div class="posts">。它们具有链接到它们的相同 css 样式表，但我希望 <div class="posts"> 容器在每个页面上保存不同的内容。同一个script.js 页面链接到这两个文件。

如果我像这样使用 JS 创建一个新的 div：

newDiv = document.createElement('div');
postContent = document.querySelector(".posts");
postContent.append(newDiv);

有没有办法将元素仅附加到about.html 页面上的<div class="posts">，而不是index.html 页面？

我可以只给about.html 页面上的div 一个唯一的类名，但是css 表中的样式将不适用于新类，除非我手动为新类名添加一些重复的样式。我还可以为about.html 页面创建一个单独的.js 文件，并将其仅链接到该页面。

但是，在我尝试使用它的情况下，我将创建许多 .html 页面（想想 2021 年 4 月的一个，2021 年 5 月的一个，等等），所以这是不可行的继续使用唯一的类名，并为每个页面的样式表添加更多重复的样式，或者为每个页面创建新的.js 文件。

如何将元素定位为仅附加到特定 .html 页面上的类？

如果这个问题之前被问过，我们深表歉意。在问这里之前，我搜索了很多地方。

Answer 1

您可以使用元素的 ID 属性。类似：

<div id="posts_of_about" class="posts">

你的js可以是这样的：

newDiv = document.createElement('div');
postContent = document.querySelector("#posts_of_about");
postContent.append(newDiv);

它只是众多解决方案中的一种。