html - 如何在不影响 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>IE

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

  // Content insert here

</div>

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

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

Answer 1

您需要after()（此处的文档）

//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);
      }
});