Javascript 动态添加项时，为什么：：before CSS选择器不能处理列表项？_Javascript_Css_Css Selectors_Xhtml_Html Lists

Javascript 动态添加项时，为什么：：before CSS选择器不能处理列表项？

javascript css

Javascript 动态添加项时，为什么：：before CSS选择器不能处理列表项？,javascript,css,css-selectors,xhtml,html-lists,Javascript,Css,Css Selectors,Xhtml,Html Lists,我有以下清单： <ul id="objects-list"> <li>Table</li> <li>Chair</li> <li>Window</li> </ul> 将默认列表标记更改为红色。一切正常，但当我使用Javascript向列表中添加新项时 var objectsList = document.getElementById("objects-list"); var li

我有以下清单：

<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>

将默认列表标记更改为红色。一切正常，但当我使用Javascript向列表中添加新项时

var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );

它发生在我的XHTML文件中。它不会发生在堆栈片段中

该项已正确添加到列表中，但根本没有标记。此外，当我在Inspector中检查新项目时，它显示no:：：before“元素

有人能解释一下原因吗？

我用一个文件复制了你的问题

问题是XHTML是区分大小写的，

li

！=<代码>LI。更改代码添加元素以使用

li

：

var listItem = document.createElement("li");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

下面是一个完整的XHTML文件，演示了这个问题。如果要在本地验证，请确保使用正确的

内容类型提供文件（使用扩展名.xhtml
，并从文件系统中打开文件也可以，至少在Chrome及其变体中是这样）：

XHTML CSS问题
保险商实验室{
列表样式：无；
}
李：以前{
内容：“\2022”；
颜色：红色；
字体大小：粗体；
显示：内联块；
宽度：1米；
}

桌子
椅子
窗口

var objectsList=document.getElementById（“对象列表”）；
var listItem=document.createElement（“LI”）；
listItem.innerHTML=“笔”；
objectsList.appendChild（listItem）；
我这边正在工作-我不能解决这个问题。。？你介意在问题中做一个堆栈片段来演示你的问题吗？@LuísP.a。等等。-它发生在XHTML中，而不是HTML中。@Maffe-如果您使用的是我怀疑的XHTML，请更新问题以说明这一点。（不要有错误的想法，本来不想这么做是可以理解的；只是事实证明它是相关的，所以在文本中添加标签和注释将有助于未来的访问者。）
var listItem = document.createElement("li");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML CSS Problem</title>
<style>
ul {
    list-style: none;
}

ul li::before {
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
}
</style>
</head>
<body>
<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>
<script>
var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );
</script>
</body>
</html>