javascript - 围绕动态 html 列表内容添加 Div

Question

例如我有这样的结构：

<Ul>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

这里的内容是动态的，我需要在其中添加包装器 divheading并跟随内容，就像这样

<div class="wrap">
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</div>

Answer 1

不要使用 DIV 来环绕您的 LI，而是考虑为每个要显示为标题的 LI 添加一个类。

<style>
.heading
{
 font-weight:bold;
}
</style>

<Ul>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

Answer 2

你在做什么是不正确的标记 ul 标签只能包含 li 标签作为直接孩子

<Ul>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

甚至

<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

编辑：

将其包装在容器中

<div class="wrap">
<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>
</div>

Answer 3

使其更具语义嵌套列表

<Ul class="wrap">
  <li>heading
    <Ul>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
    </Ul>
  </li>
</Ul>