Question

我有一个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>

Answer 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>

Answer 2

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

如果您需要支持所有浏览器，请将您的console.log代码放入ajax响应后调用的“success”函数中。这将确保它仅在ajax更新div之后运行。
如果您只需要支持与HTML5兼容的浏览器，请在“name”div上收听DOMNodeInserted事件，而不是通过innerHTML进行更改，请创建并附加html代码对象

使用JavaScript从AJAX响应中获取DOM元素

2 个答案: