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

Question

JS 新手。假设我有一个 index.html 页面，其中有一个 <div class="posts">。我还有一个 about.html 页面，其中有一个 <div class="posts">。它们具有相同的 css 样式 sheet link，但我希望 <div class="posts"> 容器每页包含不同的内容。同一个 script.js 页面被 link 编辑到两个文件。

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

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

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

我可以给 about.html 页面上的 div 一个唯一的 class 名称，但是 css sheet 中的样式不会适用于新的 class 除非我为新的 class 名称手动添加一些重复的样式。我还可以为 about.html 页面创建一个单独的 .js 文件，并且只 link 它到该页面。

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

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

如果之前有人问过这个问题，我们深表歉意。我到处搜索才问这里。

Answer 1

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

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

你的js可以是这样的：

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

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

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

Javascript: Append Element to a Class Only on Specific .html File

javascript

append