使用JavaScript從AJAX響應中獲取DOM元素

我有一個AJAX請求，它返回一塊HTML作爲插入到div中的響應。我如何使用JavaScript從AJAX響應HTML中獲取DOM元素？我在返回的HTML響應div末尾添加了JavaScript，但getElementById返回null，這顯然是因爲DOM尚未創建，並且我無法像在普通網頁上那樣使用window.onload。請參閱下面的示例。這必須在JavaScript中 - 沒有庫。使用JavaScript從AJAX響應中獲取DOM元素

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

來源

2013-09-27 Andrew Koper

yourdiv。 getElementById或另一個dom選擇器函數？ – andrewb

一旦將它插入到DIV中，就可以使用普通的DOM搜索函數（如'div.getElementById（）'）來獲取元素。 – Barmar

我添加了一個例子來解決這個問題。 –

你有兩個選擇，這取決於瀏覽器，你需要支持：

如果您需要支持所有瀏覽器，p將你的console.log代碼放入在ajax響應之後調用的「成功」函數中。這將確保它只有在div由ajax更新後才能運行。
如果你只需要支持HTML5兼容的瀏覽器，聽DOMNodeInserted事件對「名」的div和，而不是通過innerHTML改變它，創建並添加HTML代碼對象

來源

2013-09-30 18:58:12

看起來你必須從AJAX代碼的成功方法中的響應對象中抓取它。 –

演示在這裏：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-27 02:51:35 Jason

謝謝，但不是真的我在說什麼。你的是將一些文本寫入div的變體。 –

我不知道你爲什麼這麼說。這是如何在不使用框架的情況下向dom添加元素。變量'responseData'是服務器返回的HTML的佔位符。 – Jason

我明白你的意思了。我只是試圖解除我的失望，但是不會讓我失望。 –

使用JavaScript從AJAX響應中獲取DOM元素

回答

相關問題