如何隱藏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