如何在php生成的内容上动态插入HTML

How to insert HTML dynamically on php generated content

本文关键字:动态 插入 HTML php      更新时间:2023-09-26

我有一个php文件,它可以从服务器动态加载图像,一次20张图像,有点像Facebook的墙上帖子在用户向下滚动时动态加载到页面。

我想做的是从第4项开始,在每9项之前挤进自定义内容。

我尝试用jQuery的insertBefore()方法操纵DOM,即

var length = $('#container .item').length();
var i = 11;
while (i < length) {
    var el = $('#container .item').eq(i);
    $('<div>custom content</div>').insertBefore(el);
    i += 9;
}

对于初始加载的内容可以正常工作,但对于从服务器动态加载的内容则不行。

我想问:1)是否有任何方法来操纵DOM上动态加载的内容?(也许是用。bind ?)2)如果不是,我应该采取什么方法?

这样做绝对是可能的,但是您需要仔细考虑如何将所有这些组合在一起。

据我所知,你有一个php页面,为用户提供"初始"内容(就像你第一次打开facebook一样)。一旦页面加载,您添加自定义内容通过javascript/jQuery代码(这里我假设您的自定义内容不是来自php代码)。

在某些用户交互(或其他)中,您希望加载新的动态内容(例如在facebook上进一步向下滚动)。发送ajax请求,进行回调,并将此自定义内容附加到页面上(或替换页面上的其他内容)。此时,您需要在最初将自定义内容添加到页面的客户机上重新运行代码。

注意,如果这个自定义内容也由您的服务器交付,您需要在相同的或新的回调中提供与其他动态加载的内容一起的自定义内容。

总结一下:

  1. 从PHP文件(服务器端)初始加载页面
  2. JS/jQuery代码添加自定义内容(客户端)
  3. 事件(如用户交互)发生更多动态内容,ajax请求被发送(客户端)
  4. PHP检索并返回更多动态内容(服务器端)
  5. Ajax请求成功,并有这个新内容,它被附加到页面(客户端)
  6. 需要添加更多的自定义内容,通过JS/jQuery(客户端)

这大致是动态内容网页背后的"流程",然而,为了给你一个具体的解决方案,我们需要看到更多的你的代码