的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，可以修改相同的动态执行列表。