Добавить второго дочернего элемента li в существующий ul

Question

Я пытаюсь добавить второй и третий li элемент в мой существующий ul.Но не сделано правильно.

$("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

использовать перед добавлением вместо:

$("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 2

Если вы хотите добавить элементы li после 4:

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

Если вы хотите добавить элементы li между 2 и 3, используйте это:

$("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 3

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 4

Попробуйте использовать массив и Для каждого цикла , чтобы присвоить ему значение.

forEach(){.....}