Question

以下代码在DartPad中按预期工作，如下所示：

void main() {
  Element e = querySelector('table');

  String someValue = 'hello, world';
  int anotherValue = 23958;

  Element row = new Element.tr()
    ..appendHtml('''
      <td>$someValue</td>
      <td>$anotherValue</td>
    ''');

  e.append(row);
}

DartPad

但是，当我使用dart2js（dart2js -c -o app.js app.dart）编译相同的代码并在同一页面上运行时，创建的<td>被完全删除，我最终得到：

<table>
  <tr>hello, world 23958</tr>
</table>

在<script src="...">与Dartium（v39.0.2171.0 x64）中使用实际的.dart文件时，会出现同样的问题。我在Dart v1.11.1上。

一些测试：

..appendHtml('''
  <td></td>
  <td>hi</td>
''');

收率：

<table>
  <tr>hi</tr>
</table>

这与上面相同：

..appendHtml('<td>hi</td>');

我能得到它给我想要的唯一方法是：

..append(new Element.td()..text = someValue)
..append(new Element.td()..text = anotherValue.toString());

Answer 1

Dart 1.11更改了appendHTML来清理HTML输入。

为避免这种情况，您可以传递无效的消毒剂。

class MySanitizer implements NodeTreeSanitizer {
  void sanitizeTree(Node node) {}
}

document.body.appendHtml('<td>fish</td>', treeSanitizer: new MySanitizer());

Answer 2

这是一个错误。应该很快修复在出血边缘，修复正在审查中。基本上，清理会创建一个文档片段来进行清理。它没有正确使用上下文，所以它尝试创建它在身体下面，并且表格元素不在那里工作。

Answer 3

这是因为JS不支持多行字符串，你需要像这样构造它：

'<td>TEXT</td>' +
'<td>TEXT2</td>'

OR：

'<td>TEXT</td><td>TEXT2</td>'

appendHtml（）不附加完整的HTML - Dart

3 个答案: