Question

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

选项：

$("#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，但我想在容器Div的底部添加一些空格，并使用＆＃34; br＆＃34;或类似的东西。我想添加该空格以确保当用户对该列表的最后一项进行排序时，它将被正确排序，因为＆＃34;包含＆＃34;边界有时不允许在最后一项下排序。

<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追加到某个元素之上？如同一个＆＃34; br＆＃34; ＆＃34; DIV＆＃34;或＆＃34; p＆＃34;？

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之前验证{ users: { matUserId: { name: 'Mathew' } }, search: { mat: { users: { matUserId: true } }, ath: { users: { matUserId: true } }, the: { users: { matUserId: true } }, hew: { users: { matUserId: true } }, math: { users: { matUserId: true } }, athe: { users: { matUserId: true } }, thew: { users: { matUserId: true } }, mathe: { users: { matUserId: true } }, athew: { users: { matUserId: true } }, mathew: { users: { matUserId: true } }, } }是！= 0，可以修改相同的动态实现列表。

将一个元素添加到一个元素

3 个答案: