如何将分离的li元素添加到ul列表中

Question

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

https://jsfiddle.net/kq1yyoLk/基本的想法是点击2,3,4,5,6项目它会显示你的项目-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，这也会起作用。

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

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

要做你需要的东西，不需要从DOM中追加/删除任何东西。 当点击任何一个li时，你可以简单地在#list-1上调用show() ，如下所示：

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

这么多问题。

这是一些有效的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> 

您的HTML中有一个错误，您没有关闭第一个<li>元素。

在var temp = $('list-1').detach(); 你试图通过它的ID来引用元素，但是实际上并没有使用哈希。

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

您还尝试将temp元素添加到ul内部的元素中，其id为list-item - 实际上它是具有此ID的ul 。

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

Answer 4

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

试试这个

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