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

您的代码目前的组织方式是，在将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添加到页面中。

无法查询动态添加的元素

1 个答案: