將回復表單從一個div移動到另一個div javascript

Question

我試圖將我的回覆表單從一個註釋塊移動到另一個註釋塊，根據回覆按鈕的位置。

例如我有這段代碼。

<ul class="comments-list"> 
    <li class="comment" id="'.$comComment->CommentID.'"> 
     <div>Comment Content</div> 
     <a class="comment-reply-link"></a> 
     <ul> 
      <li> 
       <div>Comment Content</div> 
       <a class="comment-reply-link"></a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <div>Comment Content</div> 
     <a class="comment-reply-link"></a> 
    </li> 
</ul> 

然後回覆形式：

<div id="comment-reply">And Form HEre</div> 

我知道如何與顯示模塊，並沒有做到這一點，但我想，以避免回覆的形式在每一個註釋塊和隱藏它。 是否可以用parentNode.insertBefore和parentNode.removeChild.之類的方法做到這一點，或者有更好的方法來做到這一點。 希望任何幫助或相關鏈接。 謝謝。

Answer 1

這裏是你如何用jQuery做到這一點：

http://jsfiddle.net/Cd4Xk/

$('a.comment-reply-link').click(function(){ 

    $(this).after($('#comment-reply')); 

}); 

沒有jQuery的是比較困難的。這個問題使我最終的解決方案：How to do insert After() in JavaScript without using a library?

我也發現這個鏈接有用解決這個： http://snipplr.com/view/2107/insertafter-function-for-the-dom/

這裏是一個有效的解決方案： http://jsfiddle.net/Cd4Xk/1/

，這裏是從該解決方案的代碼：

function replyForm(me){ 
    var commentForm = document.getElementById('comment-reply') 
    insertAfter(commentForm, me); 

} 

function insertAfter(newElement,targetElement) { 
    //target is what you want it to go after. Look for this elements parent. 
    var parent = targetElement.parentNode; 

    //if the parents lastchild is the targetElement... 
    if(parent.lastchild == targetElement) { 
    //add the newElement after the target element. 
    parent.appendChild(newElement); 
    } 
    else { 
    // else the target has siblings, insert the new element between the target and it's next sibling. 
    parent.insertBefore(newElement, targetElement.nextSibling); 
    } 
} 

當然，您需要將onclick="javascript:replyForm(this)"添加到您的鏈接。

希望有所幫助。