Question

我想从css文件创建/填充<li>（而不是定义到HTML文件中）。

原因/目标： 我有不同的HTML文件。所有这些文件都有菜单，设计为LIST <li>

我想在我的CSS文件中创建/填充列表项，而不是在我的所有html文件中逐个输入。以便将来如果必须添加一个<li>那么我将永远不必逐个编辑我的所有html文件。而不是我会简单地添加一个列表项，以便它可用于我的所有html文件列表。

---现有的HTML代码：

 <div id="menu">
    <ul>
      <li><a href="../index.html">Home</a> </li>
      <li><a href="../about-us.html">About us</a> </li>
    </ul>
 </div>

我希望<li>和<a>应该从CSS输入而不是html文件。

Answer 1

您可以使用javascript

执行此操作

<html>

<script>

   function buildList() {
      // prepare your variables
      var list = document.getElementById("list");
      var item01 = document.createElement("li");
      var item02 = document.createElement("li");

      // create list items
      item01.appendChild(document.createTextNode("Item 01"));
      item02.appendChild(document.createTextNode("Item 02"));

      // add list items to the list
      list.appendChild(item01);
      list.appendChild(item02);
   }

</script>

<body>

<ul id="list"></ul>

<script>
   // call function
   buildList();
</script>

</body>
</html>

除非您想将脚本放在单独的javascript文件中，只需在任何地方调用它来创建列表

如何从CSS填充列表项<li>

1 个答案: