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

新的JS。假设我有一个

index.html

页面，它有一个

。我还有一个

about.html

页面，它有一个

。它们有相同的css样式表链接到它们，但我希望

容器在每个页面上容纳不同的内容。相同的

script.js

页面链接到这两个文件

如果我使用JS创建一个新div，如下所示：

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

是否有方法仅将元素附加到

关于.html

页面上的

，而不是

索引.html

页面上

我可以给

about.html

页面上的div一个唯一的类名，但是css表中的样式将不会应用到新类，除非我手动为新类名添加一些重复的样式。我还可以为

about.html

页面创建一个单独的

.js

文件，并仅将其链接到该页面

但是，在我尝试使用它的场景中，我将创建许多

.html

页面（想想2021年4月的一个，2021年5月的一个，等等），因此继续使用唯一的类名并为每个页面的样式表添加更多重复样式是不可行的，或者为每个页面创建新的

.js

文件

如何使元素只附加到特定

.html

页面上的类中

---

如果以前有人问过这个问题，请道歉。在这里询问之前，我搜索了很多地方。

您可以使用元素的ID属性。比如：

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

---

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

使用检查

window.location.href

的

if

语句。一个元素可以有多个类。因此，给

about.html

上的DIV一个该代码所查找的类并不意味着它不能拥有CSS所使用的类。首先：一个元素可以是多个类的一部分。因此，不需要重复样式。但是，我的解决方案是向body元素添加一个唯一的id:

。通过这种方式，您可以执行

postContent=document.querySelector（“#about.posts”）

并且在index.html页面上，

postContent

将是未定义的。谢谢Barmar和Chris G！这些就是我一直在寻找的答案。我想得太复杂了>>哦，我的天啊，我发誓这些东西就在我面前，我花了太多时间过度思考去看它们。非常感谢你！这就是答案。有时候把问题留到以后再解决是很好的（如果可能的话，哈哈）…欢迎你！

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