Java中如何在两个现有panel之间插入评论输入panel？

原生JS实现（无框架场景） #

• 给所有评论DOM节点绑定唯一标识，比如自定义属性data-comment-id，点击评论图标时先获取当前触发操作的父评论节点
• 先全局移除已存在的回复输入面板，避免同时打开多个
• 创建回复输入面板DOM结构，包含文本框、取消/提交按钮
• 通过父评论节点的nextElementSibling属性获取下一条同级评论节点
• 调用父容器的insertBefore方法完成插入：如果存在下一条评论，就插入到父评论和下一条评论之间；如果不存在下一条评论，直接插入到父评论所在容器末尾

示例代码：

function openReplyPanel(commentId) {
  // 定位当前父评论节点
  const parentComment = document.querySelector(`[data-comment-id="${commentId}"]`);
  // 移除已打开的其他回复面板
  document.querySelectorAll('.reply-input-panel').forEach(el => el.remove());
  // 构建回复面板DOM
  const replyPanel = document.createElement('div');
  replyPanel.className = 'reply-input-panel';
  replyPanel.innerHTML = `
    <textarea placeholder="输入回复内容..." rows="3"></textarea>
    <div class="btn-group">
      <button class="cancel-reply">取消</button>
      <button class="submit-reply">发布</button>
    </div>
  `;
  // 获取下一条兄弟评论节点
  const nextComment = parentComment.nextElementSibling;
  // 插入到对应位置
  parentComment.parentNode.insertBefore(replyPanel, nextComment);
}

数据驱动实现（React/Vue等框架场景，推荐） #

该方案无需手动操作DOM，适配嵌套评论场景，稳定性更高

• 评论列表用数组结构存储渲染，每一条评论数据新增showReplyPanel布尔字段，默认值为false
• 点击某条评论的回复按钮时，先把数组中所有评论的showReplyPanel置为false，再把当前点击评论的对应字段置为true
• 渲染评论列表时，每渲染完一条评论的内容，就判断该条评论的showReplyPanel是否为true，如果是则紧跟在当前评论后面渲染回复输入面板

嵌套评论场景下只需要给回复面板设置和子评论一致的缩进样式即可保证视觉对齐，不需要调整插入逻辑

注意事项 #

• 提交回复或者点击取消按钮后，直接对应修改showReplyPanel状态或者移除DOM节点即可关闭输入面板
• 如果需要支持同时打开多个回复面板，移除全局关闭其他面板的逻辑即可

内容的提问来源于stack exchange，提问作者Gao Changxiang