CODEWITHSUNDEEP
htmldom
Rohit Kumar
Rohit Kumar

Reputation: 1792

add a li in between instead of append or prepend

I want to add a new li to a list an already existing UL..

thing is I want to add it a to a pre-defined index.

.append() and .prepend() are adding to li to the last and first .

let say I want to add li after the second child(li) (snake)..

 
function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}
 
 
<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

Upvotes: 0

Views: 239

Answers (5)

Andy G
Andy G

Reputation: 19367

You can use insertBefore() together with the nth-child selector.

function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    //document.getElementById("myList").appendChild(node);
    var priorNode = document.querySelector("#myList li:nth-child(3)");
    document.getElementById("myList").insertBefore(node, priorNode);
}

querySelector is used to get the third li and insertBefore adds the water node before this.

Upvotes: 1

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

If you want the pure JS approach try insertBefore, you just need parentNode and node you want to insert before.

              function myFunction() {
                 var node = document.createElement("LI");
                 var textnode = document.createTextNode("water");
                 node.appendChild(textnode);

                var myList = window.document.getElementById("myList");
                var lion = window.document.getElementById("lion");
                //assume lion has an id
                myList.insertBefore(node, lion);
               }

Upvotes: 1

Dan
Dan

Reputation: 8784

I would do something like this:

  function myFunction(position) {
    var allElems = document.querySelectorAll('#myList li');
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.querySelector('#myList').insertBefore(node, allElems[position - 1])
  }


<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction(3)">Try it</button>

It takes a parameter of which position you would like your new value.

https://jsfiddle.net/mcjzhr35/

Upvotes: 4

ProEvilz
ProEvilz

Reputation: 5455

For a non jQuery way, you can use .querySelectorAll("li")[1] and then select the index.

Remember, 0 = the first element (Crow), 1 = Snake, 2 = Lion etc..

function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.getElementById("myList").querySelectorAll("li")[1].appendChild(node);
}
<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

You can use the after() method with the :eq() selector to achieve this in jquery:

$("ul li:eq(1)").after($("<li>Water</li>"));

Note that, since :eq() is zero-based, so the index will start from 0

function myFunction() {
    $("ul li:eq(1)").after($("<li>Water</li>"));

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

Upvotes: 1

Related Questions