Dart：以编程方式将子元素添加到 DivElement答案

【问题标题】：Dart: Adding child elements to DivElement programmaticallyDart：以编程方式将子元素添加到 DivElement
【发布时间】：2013-12-29 15:12:36
【问题描述】：

假设我想以编程方式将ButtonElement 添加到DivElement，这样生成的HTML 是：

<div class="blah">
    <input type="button" name="whatever" value="Push Me!" />
</div>

在 Dart 中，我在 DivElement 类上看到了几种方法，但我不确定哪一种适用于哪种上下文：

ButtonElement button = constructButtonElement();
DivElement div = constructDiv();

div.add(button);
div.nodes.add(button);
div.children.add(button);
// ???

对于任何其他类型的容器也是如此：BodyElement、SpanElement 等。将 DOM 元素动态添加到父容器的正确方法是什么？

【问题讨论】：

标签： dart dart-html

【解决方案1】：

我更喜欢使用通用的 Dart 方法和操作来处理 DOM 元素。因此，要将按钮添加到然后附加到正文的 div 中，我将执行以下操作：

import 'dart:html';

void main() {
  var div = new DivElement();
  var button = new ButtonElement()
    ..id = 'foo'
    ..text = 'Foo';
  div.children.add(button);
  document.body.children.add(div);
}

这会创建一个带有id 和text 的ButtonElement，将其附加到DivElement 的children，并将DivElement 附加到文档正文。

【讨论】：