如何在不影响 html dom 级别的情况下将现有的 html 转换为 ajax？

Question

首先，我很抱歉我的英语不好。

我正在尝试更新一个 html 页面。我想减少html文件中的内容并通过ajax（使用jQuery）在运行时导入内容。 现有HTML的结构如下

<div class="outermost">
  <h1>Heading</h1>
  <div class="inner">
     Content
  </div>
  <div class="inner">
     Content
  </div>
</div>

<div class="outermost">
  <h1>Heading</h1>
  <div class="inner">
// repeat and repeat

我想做的是， 删除所有div.inner 并在运行时将内容导入</h1> 和</div> 之间的位置。 即

<div class="outermost">
  <h1>Heading</h1>

  // Content insert here

</div>

由于jQuery文件中使用了大量的html DOM级别代码（例如.parent()/.children()），我不想通过创建新的div来插入内容，这会影响DOM级别当前的 HTML 文件，以便通过 AJAX 获取内容。

其中一个解决方案是更新div.outermost，但我不想重新加载标题。还有其他方法可以实现我的目标吗？谢谢。

Answer 1

你需要after() (docs here)

//remove the div
$('div.inner').remove();
//get the data using ajax
$.ajax({
     url:getUrl,
     data: getData,
     dataType: 'html'
     success: function(html) {
          //put html AFTER h1
          $('div.ourtermost h1').after(html);
      }
});