不能查询动态添加的元素

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显示在浏览器中，但是它找不到test。

使用Dart SDK版本0.5.5.0_r22416

Answer 1

你的代码目前组织的方式，你查询#test之前的HTML片段已被追加到div。如果你做的东西需要在回调#test，事情应该工作:

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

如果你不清楚发生了什么，你的HttpRequest是异步的。这是应该的(你不想在等待网络时阻塞)，但你的代码需要考虑到这一点;您不能仅仅因为loadHTML()返回就期望获取的HTML已经添加到页面中。