0

我有一个 AJAX 请求，它返回一块 HTML 作为插入到 div 中的响应。如何使用 JavaScript 从 AJAX 响应 HTML 中获取 DOM 元素？我在返回的 HTML 响应 div 的末尾有 JavaScript，但 getElementById 返回 null，显然是因为尚未创建 DOM，并且我不能像在普通网页上那样使用 window.onload。请参见下面的示例。这必须在 JavaScript 中——没有库。

<div class="page-content extractAjaxContent" id="tableContent_AJAX">
<div id="name">Biff</div>
    <html:form action="/variableCostStatusPost" method="post">
     ....some JSP to produce HTML
    </html:form>
<script>console.log("Name is " + document.getElementById('name'));</script>
</div>
4

2 回答 2

1

在这里演示：http: //jsfiddle.net/wxCJL/1/

在本例中，setTimeout调用模拟了 ajax 请求的success函数，变量responseData是服务器返回的 HTML 的占位符。

脚本

function onLoad() {
    var holder = document.getElementById('content');

    //simulate ajax call
    setTimeout(function() {
       // this code will be in the success handler

        var responseData = "<div><strong>Here I Come</strong> to save the day!</div>";
        holder.innerHTML = responseData;
    }, 2500);
}

html

<h1>Hello</h1>
<div>
   Where is the content?
   <span id='content'></span>
 </div>
于 2013-09-27T02:51:35.153 回答
0

您有两种选择，具体取决于您需要支持的浏览器：

  1. 如果您需要支持所有浏览器，请将您的console.log代码放入在 ajax 响应之后调用的“成功”函数中。这将确保它仅在 ajax 更新 div 后运行。

  2. 如果您只需要支持与 HTML5 兼容的浏览器，请DOMNodeInserted在“名称”div 上监听事件，而不是通过 更改它innerHTML，创建并附加 html 代码对象

于 2013-09-30T18:58:12.293 回答