jQuery 如何替换表单元素之后、父td容器内的原有HTML内容

你之前尝试的$( '[name="searchFrm"]' ).after().load('new.php') 无法生效，核心是两个逻辑层面的错误：

• .after() 方法如果不传入任何参数，不会选中表单之后的DOM位置，链式调用返回的仍然是原来的form元素本身。
• 后续的.load('new.php') 会把加载到的HTML直接写入form元素的内部，覆盖掉原本的搜索输入框，完全偏离你要在form外部、后方插入内容的需求。

正确实现步骤 #

• 定位目标表单元素
  按照你已有的选择器逻辑，选中指定名称的表单：

  const $searchForm = $('[name="searchFrm"]');
  

• 清除表单后的原有冗余内容
  你需要替换的范围是“form结束标签之后、外层td闭合之前”的所有内容，这部分内容本质上都是和form同级的兄弟节点，直接调用$searchForm.nextAll().remove() 就可以一次性把这些原有内容全部清除，不会误删form本身，也不需要额外遍历td的子元素，完全匹配你说的“不操作表格行结构”的要求。
• 加载PHP页面内容并插入到指定位置
  因为.load()方法的特性是把加载到的内容写入选中元素的内部，不能直接链式接在空的.after()后面，这里提供两种可选实现写法：
  • 写法一：借助临时载体实现加载，代码更简洁

    $searchForm.after( $('<div>').load('new.php') );
    

    这里的临时div只是作为内容加载的载体，加载完成后PHP返回的HTML会直接出现在form后面的对应位置，不影响原有布局。
  • 写法二：直接用get请求获取内容再插入，DOM结构更干净

    $.get('new.php', function(res) {
      $searchForm.after(res);
    });
    

    这种写法不会生成额外的包裹节点，加载到的内容会直接作为form的兄弟节点插入到td内部，完全匹配你示例中的最终渲染效果。

完整可运行示例 #

// 等待DOM加载完成后执行逻辑
$(function() {
  const $searchForm = $('form[name="searchFrm"]');
  // 清除表单后方的所有原有内容
  $searchForm.nextAll().remove();
  // 加载PHP页面的新内容插入到指定位置
  $.get('new.php', function(content) {
    $searchForm.after(content);
  });
});

这套逻辑不需要对外层td或者表格行做任何增删操作，只要form的同级后续节点就是你要替换的范围，就可以完美适配需求，不会破坏表格的原有结构。

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