javascript - 无法使用 Jquery 将 HTML 附加到列表

Question

我有以下构成目录树的 CSS。我希望能够动态附加 <li>带有 N 的标签 child 人数<ul>标记到现有 dirTree .无论我尝试什么，我最终都会附加原始文本，或者样式没有正确应用。

我不是 CSS 专家，但我正在检查开发工具并查看 :before和 :after ，但不太确定如何使用 jquery 附加它。

下面的代码应该能够在静态文件中毫无问题地运行。谢谢。

$("#dirTree").append("<li>Parent Directory</li><ul>child1</ul><ul>child2</ul>");

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: monospace;
}
ul li {
  font-size: 13px;
  position: relative;
}
ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
ul li.root {
  margin: 0px 0px 0px -20px;
}
ul li.root:before {
  display: none;
}
ul li.root:after {
  display: none;
}
ul li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
  <div class="dir">
    <ul id="dirTree">
      <li class="root">
        File Explorer
      </li>
      <li>
        Want to create a new directory? Click here
        <ul>
          <li>Click here to upload a file</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

«...好像删除了分支样式...»

您缺少 <li>在你的标记中。 “分支风格”与之相关。

此外，<ul> 中的一些文本但没有 <li>是无效标记。

$("#dirTree").append("<li>Parent Directory</li><ul><li>child1</li></ul><ul><li>child2</li></ul>");

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: monospace;
}
ul li {
  font-size: 13px;
  position: relative;
}
ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
ul li.root {
  margin: 0px 0px 0px -20px;
}
ul li.root:before {
  display: none;
}
ul li.root:after {
  display: none;
}
ul li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
  <div class="dir">
    <ul id="dirTree">
      <li class="root">
        File Explorer
      </li>
      <li>
        Want to create a new directory? Click here
        <ul>
          <li>Click here to upload a file</li>
        </ul>
      </li>
    </ul>
  </div>
</div>