無法查詢動態添加的元素

Question

在Dart中，我試圖在div元素中動態添加HTML。

注：mainContainer上元素只是在我的HTML代碼，一個div

import 'dart:html'; 

main() 
{ 
    loadHTML("web/html/test.html"); 
} 

void loadHTML(String fileName) 
{ 
    DivElement div = query("#mainContainer"); 
    div.children.clear(); 

    HttpRequest.getString(fileName).then((resp) { 
    div.appendHtml(resp); 
    }); 
} 

這裏只是出於測試目的的test.html

<h1 id="test">test</h1> 

的問題是，當我想查詢爲＃test它什麼也找不到

... 
main() 
{ 
    loadHTML("web/html/test.html"); 

    Element elem = query("#test"); 
    if (elem == null) 
    { 
    print("element is null"); 
    } 
} 
... 

是否因爲HTML尚未加載到文檔中？我不確定這裏發生了什麼事。實際的HTML顯示在瀏覽器中，但它找不到測試。

使用飛鏢SDK版本0.5.5.0_r22416

Answer 1

你的代碼目前正在組織方式，你是在HTML片段之前查詢#test已追加到div。如果你在回調要求#test的東西，事情應該工作：

HttpRequest.getString(fileName).then((resp) { 
    div.appendHtml(resp); 
    Element elem = query("#test"); 
    if (elem == null) 
    print("element is null"); 
}); 

如果不清楚你是怎麼回事，你的HttpRequest是異步的。這是應該的（你不想在網絡上等待時阻止），但是你的代碼需要考慮到這一點;您不能指望只是因爲loadHTML()已返回而將抓取的HTML添加到頁面中。