如何隐藏li元素中的所有内容并动态地插入div

我正在使用twitter引导程序。如何隐藏li元素中的所有内容并动态地插入div

<div class="hero-unit span8 pull-right"> 
     <h5><span class="label label-info">General Account Settings</span></h5> 
      <ul class="nav nav-list"> 
      <c:forEach items="${personUI}" var="entry"> 
        <li id="${entry.key}"> 
        <div class="span2 pull-left"> 
         <span class="label">${entry.key}</span> 
        </div> 
        <div class="span2"> 
         <font size="2"><span><strong>${entry.value}</strong></span></font> 
        </div> 
        <div class="span2 pull-right"> 
         <font size="2"> 
          <span> 
          <a href="#" id="${entry.key}"> 
          <span class="add-on"> 
           <i class="icon-pencil"></i> 
          </span>Edit 
           <script type="text/javascript"> 
            $(function(){ 
             $(this).click(function(){ 
              $('li[${entry.key}]').hide(); 
             }); 
            }); 
           </script> 
           </a> 
          </span> 
         </font> 
        </div> 
        </li> 
      </c:forEach> 
      </ul> 
    </div> 
</div>

当用户单击编辑按钮时，下面的div必须动态添加到编辑按钮所关联的li元素。 div内的表单也应该有一个提交和关闭按钮。提交/关闭div应该在发布过程后再次变为不可见，并用新值更新相应的li元素。

<!-- Name Edit div --> 
<div id="nameEdit" style="display:none;"> 
    <form id="editname" action="<c:url value="/editname" />" method="post"> 
    <div class="control-group"> 
     <div class="controls"> 
      <input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline"> 
      <input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline"> 
     </div> 
    </div> 
    </form> 
</div>

快照 enter image description here