Question

从ul列表中删除后，我被迫添加li元素。我在varius方法中尝试了append()和appendTo()，但仍然没有。

https://jsfiddle.net/kq1yyoLk/ 基本的想法是点击2,3,4,5,6项目，它将显示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

即使您更改了列表ID，这也会有效。

＆＃13;

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

＆＃13;

#list-1 {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

首先请注意，您的HTML缺少第一个</li>，而$('list-1')缺少Id选择器的#。

要做你需要的事情，不需要在DOM中附加/删除任何内容。点击任意show()时，您只需在#list-1上致电li，如下所示：

＆＃13;

$('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
});

＆＃13;

#list-1 {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

这么多问题。

这里有一些有效的JavaScript;

＆＃13;

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

＆＃13;

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

＆＃13;

您的HTML中存在错误，而您尚未关闭第一个<li>元素。

在var temp = $('list-1').detach();中，您尝试按ID引用该元素，但不使用哈希实际执行此操作。

此外，您使用的样式意味着您只能通过Inspect Element看到元素移动，因为它在移动后仍然没有显示。

您还尝试将temp元素添加到ID为ul的{{1}}内的元素中 - 实际上它是list-item的{{1}}这个ID代替了。

如果您花一点时间真正查看代码，这些都不是难以发现的问题。

Answer 4

您没有将您的小孩作为孩子添加到您的ul元素

试试这个

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

如何将分离的li元素添加到ul list

4 个答案: