我写了一个动态评论系统，没有页面刷新。

The problem is, 如何移动“form”元素来添加子注释？就像comment-reply.min.js

我的工作区：

<script type="text/x-tmpl" id="intoTemplate">       
{% for (var i=0; i<o.result.length; i++) { %}
<div id="post-{%=o.result[i].post.id%}">
    <div><a href="<?php echo homeurl(); ?>/{%=o.result[i].post.type%}/{%=o.result[i].post.slug%}/">{%=o.result[i].post.title%}</a></div>
    <div class="content">{%=o.result[i].post.content%}</div>
    <div>{%=moment.unix(o.result[i].post.time).locale(\'tr\').format("DD MMMM YYYY, ddd kk:mm:ss")%}</div>

<h3>Comments</h3>
    {% if(o.result[i].post.comment.total.found>0){
         for (var d=0; d<o.result[i].post.comment.result.length; d++) { %}

        <div id="comment-{%=o.result[i].post.comment.result[d].id%}">
            <div class="content auto-hashtag auto-usertag">
                {%=o.result[i].post.comment.result[d].content%}
                <button>Reply</button>
            </div>
        </div>

        {% }
    } else { %}
        <div>no comments</div>
    {% } %}

    <div id="comments-{%=o.result[i].post.id%}" data-nonce="{%=o.result[i].post.nonce%}">
        <form id="commentForm-{%=o.result[i].post.id%}" class="comment-form">
            <?php if($currentUserId!=0&&is_numeric($currentUserId)): ?>
                 <input type="hidden" name="user_id" value="<?php echo $currentUserId; ?>" />
            <?php else: ?>
                 <input type="text" name="guest" placeholder="Your Name" />
            <?php endif; ?>
                 <input type="hidden" name="nonce" value="{%=o.result[i].post.nonce%}" />
                 <input type="hidden" name="id" value="{%=o.result[i].post.id%}" />
                 <input type="hidden" name="parent" value="0" />
                 <textarea name="content" placeholder="Write..."></textarea>
        </form>
    </div>
</div>
{% } %}
</ul>
</script>

在jSON解析呈现之后，我的纯html（类似）：

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
   </div>
   <form id="commentForm-123">
     <input type="hidden" name="nonce" value="12hf223nf" />
     <input type="hidden" name="id" value="123" />
     <input type="hidden" name="parent" value="0" /> <!-- parent = 0 : not a child comment -->
     <textarea name="content" placeholder="Write..."></textarea>
   </form>
</div>

如何在单击任何回复按钮时，<form id="commentForm-*"> 移动到内部单击的按钮div。就像下面的例子一样。

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
         <form id="commentForm-123">
             <input type="hidden" name="nonce" value="12hf223nf" />
             <input type="hidden" name="id" value="123" />
             <input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->
             <textarea name="content" placeholder="Write..."></textarea>
         </form>
   </div>
</div>

移动后，父id设置输入值：<input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->

现在所有这些都在后端和前端工作。但我唯一的问题是我不知道如何携带"<form>" 要素

注意：这就像index.php, archive.php Custom Post Query 页

<script>
var addComment = {
    settings: function( parentId, postId ) {        

        var 
            t                   = $(this),
            commentDivName      = $(\'#comment-\'+parentId),
            formDivName         = $(\'#commentForm-\'+postId),
            formReplyDivName    = $(\'#commentReplyForm-\'+parentId),
            postDivName         = $(\'#post-\'+postId),
            theform             = formDivName.find(\'form.comment-form\');

            if( !t.length || !commentDivName.length || !formDivName.length || !postDivName.length ) {
                return;
            }

            if(!theform.length){

                $(postDivName).find(\'[id^=commentReplyForm-]\').each(function(){
                    if($(this).find(\'form.comment-form\').length){
                        formDivName = $(\'#\'+$(this).attr(\'id\'));
                    }
                });

                theform         = formDivName.find(\'form.comment-form\');

            }

            theform.find(\'input[name=parent]\').val(parentId);
            theform.appendTo(formReplyDivName);

            var cancel          = formReplyDivName.find(\'.cancel\')
            cancel.show();

    }
};
</script>