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

get DOM element from AJAX response with JavaScript

本文关键字：获取 DOM 元素 响应 JavaScript AJAX 使用      更新时间：2023-09-26

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

演示：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);
}

目录

<h1>Hello</h1>
<div>
   Where is the content?
   <span id='content'></span>
 </div>

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

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

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

相关文章：