本文详解如何通过原生 javascript 实现点击不同按钮时，将同一表单（如 `#answer-form`）动态插入到对应目标位置（如注释标记 `` 所在的父容器），并支持显隐切换与位置重定位。
在实际开发中，常需复用一个表单（如评论回复框）并根据用户操作将其“移动”至不同上下文区域——例如在多条评论下分别点击“回复”按钮，使同一个 #answer-form 出现在对应评论下方。注意：DOM 中的 appendChild() 并非复制元素，而是迁移节点，因此无需手动移除旧位置，直接追加即自动解绑原父节点。
以下为完整、健壮的实现方案：
✅ 核心逻辑说明
- 使用 querySelector 定位每个按钮所属的「目标插入区」（即 <!--move here section--> 所在的最近 .comment-section 或 #comment 容器）；
- 利用 style.display 控制显隐（比 classList.toggle('d-none') 更直观且避免 CSS 依赖冲突）；
- 每次点击前先检查表单是否已存在于某处，若存在则先从当前父节点移除，再插入新位置，确保唯一性。
✅ 推荐代码实现（兼容性强，无框架依赖）
<!-- 示例结构：多个评论区块 -->
<div class="comment-section" id="comment-1">
<div>评论 1 内容...</div>
<button type="button" class="answer-btn" data-target="#comment-1">回复</button>
<!--move here section-->
</div>
<div class="comment-section" id="comment-2">
<div>评论 2 内容...</div>
<button type="button" class="answer-btn" data-target="#comment-2">回复</button>
<!--move here section-->
</div>
<!-- 全局复用的表单（初始隐藏） -->
<div id="answer-form" class="border border-secondary text-right m-2" style="display: none; background-color: gainsboro;">
<p class="p-2">لطفا پاسخ خود را بنویسید</p>
<form asp-action="CreateComment" asp-controller="CategoryItem" method="post" class="was-validated w-100 p-2">
<input type="hidden" id="BookFK" name="BookFK" required>
<div class="form-group">
<textarea class="form-control" rows="5" id="Text" name="Text" required></textarea>
<div class="valid-feedback">تایید شد</div>
<div class="invalid-feedback">لطفا این بخش را پر کنید.</div>
</div>
<div class="form-group mt-1 d-inline-block w-100">
<button type="submit" class="btn btn-success float-end">ثبت پاسخ</button>
<button type="button" class="btn btn-danger float-start" onclick="hideAnswerForm()">لغو</button>
</div>
</form>
</div>// 获取表单与所有回复按钮
const answerForm = document.getElementById('answer-form');
const answerButtons = document.querySelectorAll('.answer-btn');
// 点击回复按钮：移动并显示表单
answerButtons.forEach(btn => {
btn.addEventListener('click', function () {
const targetId = this.getAttribute('data-target');
const targetSection = document.querySelector(targetId);
// 若表单已显示，先隐藏并从当前父节点移除（可选：保留状态）
if (answerForm.style.display === 'block') {
answerForm.style.display = 'none';
// 可选：清除表单内容以重置
answerForm.querySelector('textarea#Text').value = '';
answerForm.querySelector('input#BookFK').value = '';
return;
}
// 移动表单到目标区域末尾（即注释标记所在位置之后）
if (targetSection) {
// 清空目标区可能残留的旧表单（防御性处理）
const existingForm = targetSection.querySelector('#answer-form');
if (existingForm) existingForm.remove();
// 插入到目标容器内最后（即紧邻 `<!--move here section-->` 的位置）
targetSection.appendChild(answerForm);
answerForm.style.display = 'block';
}
});
});
// 独立隐藏函数（供取消按钮调用）
function hideAnswerForm() {
answerForm.style.display = 'none';
}⚠️ 注意事项
- ID 唯一性：确保页面中 #answer-form 仅有一个；若需多实例，请改用 class + this 上下文绑定。
- 目标定位灵活性：示例中使用 data-target 属性精准关联按钮与目标容器；你也可改用 closest('.comment-section') 自动向上查找最近的上下文区块。
- 表单状态管理：建议在隐藏前重置 textarea 和隐藏字段值，避免残留上一次输入。
- 无障碍与体验：添加 aria-expanded 和焦点管理（如 answerForm.focus()）可进一步提升可访问性。
该方案不依赖 jQuery 或任何框架，纯原生 JavaScript 实现，语义清晰、易于维护，并完美满足“点击切换位置+显隐”的核心需求。
