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

时间:2015-06-02 07:02:46

标签: javascript php jquery

我有一个动态加载来自服务器的图像的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)如果没有,我应该采取什么方法?

1 个答案:

答案 0 :(得分:0)

这绝对有可能做到这一点,但你需要仔细考虑这一切是如何组合在一起的。

据我所知,你有一个为用户服务的php页面&#34; initial&#34;内容(就像你第一次打开facebook时那样)。加载页面后,您可以通过javascript / jQuery代码添加自定义内容(这里我假设您的自定义内容不是来自php代码)。

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

请注意,如果您的服务器也提供此自定义内容,则需要在同一个或新的回调中提供与其他动态加载内容一起使用的自定义内容。

总结一下:

  1. 从PHP文件(服务器端)加载初始页面
  2. JS / jQuery代码添加自定义内容(客户端)
  3. 发生更多动态内容的事件(如用户交互),发送ajax请求(客户端)
  4. PHP检索并返回更多动态内容(服务器端)
  5. Ajax请求成功并拥有此新内容,它会附加到页面(客户端)
  6. 需要添加更多自定义内容,由JS / jQuery(客户端)
  7. 大概是&#34;流程&#34;在具有动态内容的网页背后,为您提供具体的解决方案,我们需要查看更多代码。