使用 AJAX 重新加载除一个元素之外的 DOM答案

【问题标题】：Reload DOM except one element with AJAX使用 AJAX 重新加载除一个元素之外的 DOM
【发布时间】：2014-07-11 03:42:25
【问题描述】：

好的，所以我在页面上有一个音频播放器，在浏览页面时它不应该停止。

页面布局是不可更改的（要求，不是我的想法），所以不可能只将带有音频播放器的放在外面并重新加载内容。

是否有可能使用 ajax 重新加载 DOM，但忽略音频播放器的部分，只替换它周围的所有内容？据我所知，这是不可能的，但我想确定一下，因为有人告诉我它是。

谢谢

页面示例

<html>
<head>
 ...
</head>
<body>
<div id="headerandnavigationetc">...</div>
<div id="content>
   <div id="breadcrumbsnstuff">...</div>
   <div id="leftcolumn">
       Content
   </div>
   <div id="rightcolumn">
       More content
       <div id="audioplayer">player</div>
   </div>
</div>
<div id="footer">
    ...
</div>
</body>
</html>

【问题讨论】：

标签： jquery html ajax dom

【解决方案1】：

这取决于音频播放器在 DOM 中的位置。潜在地，您可以在调用 AJAX 之前在函数中修改 DOM，以便要更改的所有内容都在 <div id="ajaxme"></div> 内，然后音频播放器在它之后。在 AJAX 调用的“成功”功能上，您可以执行类似 $('#audioplayer').appendTo('#rightcolumn');

的操作

所以整个事情可能是：

function ChangeDom() {
   $('body').html('<div id="ajaxme">' + $('body').html() + '</div>');
   $('#audioplayer').insertAfter('#ajaxme');

   // Do AJAX to replace ajaxme div

   $('#audioplayer').appendTo('#rightcolumn');
}

【讨论】：

谢谢！这几乎是一种黑客攻击，但我想唯一的方法是通过黑客攻击。由于将主页重建为单页应用程序将是一项相当繁重的任务，但也更好。无论如何，谢谢！