Jquery如何在特定元素之后替换HTML？

Question

我有一个很简单的布局，部分如下：

<td class="subset">
<form name="searchFrm" method="get" action="update.php">
<input type="text" name="search">
</form>

html 
html
html

</td>

我想用从 PHP 页面加载的新 html 替换 form 到 td 之后的所有内容。

例如： 将其更改为：

<td class="subset">
<form name="searchFrm" method="get" action="update.php">
<input type="text" name="search">
</form>

New HTML from PHP

</td>

我知道我可以使用$( '[name="searchFrm"]' ) 选择表单并使用.load('new.php') 加载外部页面，但是如何删除表单后的 HTML，然后添加新的 html？

我试过了

$( '[name="searchFrm"]' ).after().load('new.php')

这没有帮助，有什么办法可以做到这一点？ 我不是要添加或删除单个行，而是将元素后的 HTML 替换为一行。

使用正确的表单名称更新帖子。

谢谢

Answer 1

首先请注意，$('[name="search"]') 不仅会选择form，还会选择input，因为它也具有相同的name 值。所以使用$('form[name="search"]')。

有几种方法可以解决您的问题。

一个是answer of @pavel，它会随新内容一起重写表单html。

这种方法的一些问题是

• 确切发布的代码还受到选择器中缺少form 的影响，因此将从结果中删除form 标记。
• 如果您稍后在 form 之前添加一些内容（在同一个 td）它将停止工作（它将删除该内容）
• 如果表单或其任何后代上有附加的处理程序，它们将会丢失，因为.html 只保留 html 文本，而不是通过代码附加的任何内容。
• 它也不能直接使用.load。但是您可以使用$.ajax 解决这个问题

---

另一个更复杂但更安全的解决方案是在form 之后经历选择实际节点的痛苦。

为此，您需要使用.contents，这是唯一一个也返回textNodes 的jQuery 方法。

一个详细的实现（你可以看到每个步骤）可能是

function replaceContentsAfterForm(newUrl) {
  const form = $('form[name="search"]'); // select the form only
  const formParent = form.parent(); // get the form container
  const contents = [...formParent.contents()]; // select the contents of the container in an array
  const formIndex = contents.indexOf(form[0]); // find where the form is in the array 
  const afterForm = contents.slice(formIndex + 1); // select everything after the form
  const placeholder = $('<div id="placeholder" />'); // create a temporary placeholder to contain the data after the form
  placeholder.append(afterForm); // fill the placeholder with the contents after the form
  form.after(placeholder); // put the placeholder after the form in the DOM

  $(placeholder).load(newUrl, function() { // load the new content
    placeholder.replaceWith(placeholder.contents()) // and finally remove the placeholder eleemnt
  })
}

// and you can call it with
replaceContentsAfterForm('new.php');

Answer 2

通过form + new content更改父元素内容。

var form = $('[name=search]');
var parent = form.parent();

parent.html(form.html() + 'new HTML content');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td class="subset">
    <form name="search" method="get" action="update.php">
        <input type="text" name="search">
    </form>

    html 
    html
    html

</td>