的appendChild一個cerain元件

Question

上方的元件所以我有將與使用的appendChild方法他人的div填充動態 div元素，這應該顯示的列表。用戶現在可以使用JqueryUI Sortable選項對該列表進行排序。
我還添加了一些排序選項attribues像如下：

選項：

$("#NameContainer").sortable("option", "axis", "y"); 
$("#NameContainer").sortable("option", "containment", "parent"); 

LIST

<div id="NameContainer" class="ui-widget"> 
    <div id="Name_1">John</div> 
    <div id="Name_2">Jack</div> 
    <div id="Name_3">Charlie</div> 
    <div id="Name_4">Sawyer</div> 
    <div id="Name_5">Yin</div> 
    <div id="Name_6">Ben</div> 
</div> 

現在到了我的問題。 appendChild總是在容器的底部插入新的div，但是我想用一個「br」或類似的東西在Container Div的底部添加一些空間。我想添加該空間以確保當用戶對列表中的最後一項進行排序時，它將被正確排序，因爲「包含」邊界有時不允許在最後一項下進行排序。

<div id="NameContainer" class="ui-widget"> 
     <div id="Name_1">John</div> 
     <div id="Name_2">Jack</div> 
     <div id="Name_3">Charlie</div> 
     <div id="Name_4">Sawyer</div> 
     <div id="Name_5">Yin</div> 
     <div id="Name_6">Ben</div> 
     <br><!--SPACEHOLDER--> 
    </div> 

所以這纔是我的問題是，有沒有去的appendChild某個元素之上？
像「br」「div」或「p」？

Answer 1

試試這個的appendChild的：

請注意我用隨機值在DIV添加爲我沒有你的動態值。

檢查小提琴：https://jsfiddle.net/dqx9nbcy/

<div id="NameContainer" class="ui-widget"> 
    <div id="divspacer"></div> 
    </div> 
    <button id="btn">ADD Element</button> 

    $(document).ready(function(){ 
    $("#btn").click(function(){ 
     var parentnode = document.getElementById("NameContainer"); 
     var existnode = document.getElementById("divspacer"); 
     var rand = Math.floor((Math.random() * 10) + 1); 
     var newName = document.createElement("div"); 
     newName.setAttribute("id", rand); 
     newName.setAttribute("value", rand); 
     newName.setAttribute("class","ui-widget-content"); 
     newName.innerHTML = rand; 
     parentnode.insertBefore(newName,existnode); 
    }); 
}); 

Answer 2

參考http://api.jquery.com/appendto/，但你需要確保你的目標正確的標籤。

Answer 3

你可以試試這個代碼片段。

HTML摘錄

<div id="NameContainer" class="ui-widget"> 
<div id="Name1">Name1</div> 
<div id="Name2">Name2</div> 
<div id="Name3">Name3</div> 
<div id="Name4">Name4</div> 
<br> 
<br> 
</div> 

JavaScript片段

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     var containerDiv= $("#NameContainer"); 
     var childList = containerDiv.children("div"); 
     var newElementid = childList.length; 
     var newName = document.createElement("div"); 
     newName.setAttribute("id", "Name"+(newElementid+1)); 
     newName.setAttribute("value", "Name"+(newElementid+1)); 
     newName.setAttribute("class","ui-widget-content"); 
     newName.innerHTML = "Name"+(newElementid+1); 
     $(childList[childList.length-1]).after(newName); 
    }); 
}); 

這是特定的地方有在初始列表中的某些元素的情況。通過在使用相同的代碼之前驗證childList.length是！= 0，可以修改相同的動態執行列表。