无法查询动态添加的元素答案

【问题标题】：Cannot query dynamically added elements无法查询动态添加的元素
【发布时间】：2013-05-08 00:26:40
【问题描述】：

在 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

【问题讨论】：

标签： dart dart-html

【解决方案1】：

您的代码当前的组织方式是在将 HTML 片段附加到 div 之前查询 #test。如果您在回调中执行需要 #test 的操作，则应该可以：

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

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

【讨论】：