javascript - AppendChild 在某个元素之上添加一个元素

Question

所以我有一个 div 元素，它将使用 appendChild 方法动态填充其他 div，这应该显示一个列表。用户现在可以使用 JqueryUI Sortable 选项对该列表进行排序。
我还添加了一些可排序选项属性，如下所示:

选项:

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

列表

<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，但我想在容器 Div 的底部添加一些空间，并带有“br”或类似的内容。我想添加该空间以确保当用户对该列表的最后一项进行排序时，它将正确排序，因为“包含”边界有时不允许在最后一项下进行排序。

<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，因为我没有您的动态值。

检查 fiddle :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);
    });
});