无法查询动态添加的元素

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显示在浏览器中,但无法找到测试.

使用Dart SDK版本0.5.5.0_r22416

Answer 1

您的代码当前的组织方式,您在查询#testHTML片段之前要查询div.如果你#test在回调中做了所需的东西,事情应该有效:

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

如果您不清楚发生了什么,您的HttpRequest是异步的.这是应该的(你不想在网络上等待时阻止),但你的代码需要考虑到这一点; 您不能指望已将提取的HTML添加到页面中,因为 loadHTML()已返回.