Question

I’m trying to move my Reply Form from one comment block to another according to where Reply button was pushed.

For example I have this code.

<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>

And then reply form:

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

I know how to do it with display block and none but I’d like to avoid making Reply form in every comment block and hiding it.
Is it possible to do it with something like parentNode.insertBefore and parentNode.removeChild. or is there a better way to do that.
Would appreciate any help or related links.
Thank you.

Answer 1

Here’s how you would do it with jQuery:

http://jsfiddle.net/Cd4Xk/

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

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

});

without jQuery it is more difficult. this question led me to the eventual solution: How to do insert After() in JavaScript without using a library?

I also found this link helpful in solving this:
http://snipplr.com/view/2107/insertafter-function-for-the-dom/

Here’s a working solution:
http://jsfiddle.net/Cd4Xk/1/

and here is the code from that solution:

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);
    }
}

of course, you will need to add onclick="javascript:replyForm(this)" to your links.

Hope that helps.