Javascript - 创建一个元素并添加到<ul>列表中

Question

我有一个ul列表，需要在第6个<li>之后创建一个<h3>并将其添加到此列表中。

这是标记：

<div class="sticky-sidebar-content">
<h3>Sub title</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
/* This is where the <h3> needs to go */
<li>list item 7</li>
<li>list item 8</li>
<li>list item 9</li>
<li>list item 10</li>
</ul>
</div>

这是我的js代码：

<script>
let header = document.createElement('h3');
header.textContent= 'New subtitle';
const nav = document.querySelectorAll('.sticky-sidebar-content > ul > li:nth-child(6)');
nav.parentNode.insertBefore(header, nav.nextSibling);
</script> 

然而，我似乎无法做到这一点，我知道我错过了一些可能简单而明显的东西。

任何帮助都非常感谢

Answer 1

您需要使用querySelector而不是querySelectorAll来针对元素

document.querySelector('.sticky-sidebar-content > ul > li:nth-child(6)');

let header = document.createElement('h3');
header.textContent = 'New subtitle';
const nav = document.querySelector('.sticky-sidebar-content > ul > li:nth-child(6)');
nav.parentNode.insertBefore(header, nav.nextSibling);

<div class="sticky-sidebar-content">
<h3>Sub title</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>

<li>list item 7</li>
<li>list item 8</li>
<li>list item 9</li>
<li>list item 10</li>
</ul>
</div>