How to add detached li element to ul list

Question

I was stuck on adding li element after deleting it from ul list. I've tried append() and appendTo() in varius methods but still nothing.

https://jsfiddle.net/kq1yyoLk/ The basic idea is that clicking on the 2,3,4,5,6 item it will show you item-1

 $(function() { $('li').on('click', function(e) { e.preventDefault(); var number = $("a", this).data('number'); var temp = $('list-1').detach(); $('ul #list-item').append(temp); }); }); 

 #list-1 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="features-content"> <ul id="list-item" class="fa-ul features-list"> <li id="list-1"><a href="#" data-number="1">1</a> <li id="list-2"><a href="#" data-number="2">2</a></li> <li id="list-3"><a href="#" data-number="3">3</a></li> <li id="list-4"><a href="#" data-number="4">4</a></li> <li id="list-5"><a href="#" data-number="5">5</a></li> <li id="list-6"><a href="#" data-number="6">6</a></li> <li id="list-7"><a href="#" data-number="7">7</a></li> </ul> </div> 

Answer 1

This will work even if you change the lists id.

 $(function() { $('li').on('click', function(e) { e.preventDefault(); $('#list-item li:first-child').show(); }); }); 

 #list-1 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="features-content"> <ul id="list-item" class="fa-ul features-list"> <li id="list-1"><a href="#" data-number="1">1</a> <li id="list-2"><a href="#" data-number="2">2</a></li> <li id="list-3"><a href="#" data-number="3">3</a></li> <li id="list-4"><a href="#" data-number="4">4</a></li> <li id="list-5"><a href="#" data-number="5">5</a></li> <li id="list-6"><a href="#" data-number="6">6</a></li> <li id="list-7"><a href="#" data-number="7">7</a></li> </ul> </div> 

Answer 2

Firstly note that your HTML was missing the first </li> and $('list-1') is missing the # for the Id selector.

To do what you require there's no need to append/detach anything from the DOM. You can simply call show() on #list-1 when any of the li are clicked, like this:

 $('li').on('click', function(e) { e.preventDefault(); $('#list-1').show(); var number = $(this).find('a').data('number'); console.log(number); // I assume you're using this in your logic somewhere }); 

 #list-1 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="features-content"> <ul id="list-item" class="fa-ul features-list"> <li id="list-1"><a href="#" data-number="1">1</a></li> <li id="list-2"><a href="#" data-number="2">2</a></li> <li id="list-3"><a href="#" data-number="3">3</a></li> <li id="list-4"><a href="#" data-number="4">4</a></li> <li id="list-5"><a href="#" data-number="5">5</a></li> <li id="list-6"><a href="#" data-number="6">6</a></li> <li id="list-7"><a href="#" data-number="7">7</a></li> </ul> </div> 

Answer 3

So many problems.

Here's some working JavaScript;

  $(function() { $('li').on('click', function(e) { e.preventDefault(); var number=$("a",this).data('number'); var temp = $('#list-1').detach(); $('ul#list-item').append(temp); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="features-content"> <ul id="list-item" class="fa-ul features-list"> <li id="list-1"><a href="#" data-number="1">1</a></li> <li id="list-2"><a href="#" data-number="2">2</a></li> <li id="list-3"><a href="#" data-number="3">3</a></li> <li id="list-4"><a href="#" data-number="4">4</a></li> <li id="list-5"><a href="#" data-number="5">5</a></li> <li id="list-6"><a href="#" data-number="6">6</a></li> <li id="list-7"><a href="#" data-number="7">7</a></li> </ul> </div> 

You have an error in your HTML where you've not closed your first <li> element.

In var temp = $('list-1').detach(); you're trying to reference the element by its ID, but not using a hash to actually do so.

Also, the styles you're using means you'll only see the element move via Inspect Element, as it's still displayed none after moving.

You also try and add the temp element into an element inside a ul with the id of list-item - when actually it's your ul that has this ID instead.

These aren't hard issues to spot if you spend a little time really looking at your code.

Answer 4

You have not appended your li as a child to your ul element

Try this

 function function1() {
      var ul = document.getElementById("list");
      var li = document.createElement("li");
      li.appendChild(document.createTextNode("Four"));
      ul.appendChild(li);
    }