如何將分離的li元素添加到ul列表中

Question

從ul列表中刪除後，我一直在添加li元素。 我試過append()和appendTo() varius方法，但仍然沒有。

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

您還沒有追加貴麗作爲一個孩子到你的UI元素

試試這個

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

Answer 2

首先請注意，您的HTML缺少第一個</li>和$('list-1')缺少Id選擇器的#。

要做你需要的東西，不需要附加/從DOM中分離任何東西。您可以直接在#list-1調用show()任何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>

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引用元素，但不使用散列實際上這樣做。

此外，您使用的樣式意味着您只能看到通過檢查元素移動的元素，因爲它在移動後仍然不顯示。

您也可以試着和temp元素與list-item的ID添加到某個元素的ul內 - 而實際上它是你的ul有這個ID代替。

如果你真的花一點時間看看你的代碼，這些並不難找到。

Answer 4

即使您更改列表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>