在现有ul中添加li元素的第二个子元素

Question

我正在尝试在现有ul中添加第二和第三li元素。但做得不好。

$("ul li:nth-child(2)").append($("<li>").text("ADDDED TEST 5"));
$("ul li:nth-child(3)").append($("<li>").text("ADDDED TEST 6"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a_rgt">
<ul>
<li>TEST1</li>
<li>TEST2</li>
<li>TEST3</li>
<li>TEST4</li>
</ul>
</div>

Answer 1

如果您希望在 4 之后添加 li 项：

$("#your_ul_id").append('<li>ADDDED TEST 5</li>');
$("#your_ul_id").append('<li>ADDDED TEST 6</li>');

如果您希望在 2 和 3 之间添加 li 项，请使用以下命令：

$("ul li:nth-child(2)").after($("<li>").text("ADDDED TEST 2.1"));
$("ul li:nth-child(3)").after($("<li>").text("ADDDED TEST 2.2"));

或

$("ul li:nth-child(2)").after('<li>ADDDED TEST 2.1</li><li>ADDDED TEST 2.2</li>');

Answer 2

for (let i = 0; i < 4; i++) {
$("ul li:nth-child(4)").append("<li>ADDDED TEST " + (i + 5) + "</li>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a_rgt">
<ul>
<li>TEST1</li>
<li>TEST2</li>
<li>TEST3</li>
<li>TEST4</li>
</ul>
</div>

Answer 3

在前面使用而不是追加：

$("ul li:nth-child(2)").before($("<li>").text("ADDDED TEST 5"));
$("ul li:nth-child(3)").before($("<li>").text("ADDDED TEST 6"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a_rgt">
<ul>
<li>TEST1</li>
<li>TEST2</li>
<li>TEST3</li>
<li>TEST4</li>
</ul>
</div>

Answer 4

如果有人仍然感兴趣，如何在没有依赖的情况下正确(和更快地(做到这一点：

const el = document.querySelector('ul li:nth-child(1)')
el.insertAdjacentHTML('afterend', '<li>ADDDED TEST 6</li>');
el.insertAdjacentHTML('afterend', '<li>ADDDED TEST 5</li>');

<div class="a_rgt">
<ul>
<li>TEST1</li>
<li>TEST2</li>
<li>TEST3</li>
<li>TEST4</li>
</ul>
</div>