How to add single li element to ul list

Question

I am stuck in adding the li element after removing it from the ul list. I tried append()and appendTo()in varius-methods, but still nothing.

https://jsfiddle.net/kq1yyoLk/ The main idea is that when you click on an element 2,3,4,5,6 it will show you point-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>

Run codeHide result

Answer 1

This will work even if you change the id of the lists.

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

Run codeHide result

Answer 2

First, note that your HTML didn't have the first one </li>and is $('list-1')missing #for the identifier selector.

, , / - DOM. show() #list-1 li, :

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

Hide result

Answer 3

.

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>

Hide result

HTML, <li>.

var temp = $('list-1').detach(); , .

, , , , Inspect Element, - .

temp ul list-item - ul, .

, .

Answer 4

li ul

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