JS循环生成p段落时如何在第3个段落下方插入指定ul元素

循环索引i从0开始计数，第三个段落对应的索引值为2，你只需要在循环中追加完第三个p元素后插入ul元素即可，修改后的完整代码如下：

JavaScript代码 #

var i = 0;
for (i = 0; i < 5; i++) {
  const para = document.createElement("p");
  const node = document.createTextNode("This is new.");
  para.appendChild(node);
  const element = document.getElementById("div1");
  element.appendChild(para);
  // 在第三个段落后添加ul
  if (i === 2) {
    const ul = document.createElement("ul");
    ul.className = "nav";
    const pInUl = document.createElement("p");
    pInUl.innerText = "Test";
    ul.appendChild(pInUl);
    element.appendChild(ul);
  }
}

CSS代码 #

.nav {
  background-color: grey;
  text-align: center;
  width: 90px;
  height: 90px;
  margin: 0;
  padding: 0;
  transition: background .5s;
  /* .5s 为过渡动画的持续时长 */
}

HTML代码 #

<!-- 保证页面存在id为div1的容器用于挂载动态生成的元素 -->
<div id="div1"></div>

补充提示：按照HTML语义规范，ul的直接子元素应为li标签，如果你需要在列表内放置段落，建议将p包裹在li内部，避免出现语法校验错误。

内容的提问来源于stack exchange，提问作者zefzef aa