附加元素在IE11中不起作用

Question

在构造函数中，我创建了一个元素

var this.legendElement = this.compileLegend();

以后我想在事件监听器中使用它：

var takeControl = function() {
    this.element.empty();
    this.legendElement.appendTo(this.element);
}

附加了legendElement，但为空！我不明白为什么。 在其他浏览器（测试过的Firefox，Chrome）中，它正在运行。

另外，当我打印 this.legendElement 的内容时，我会看到html代码。换句话说

console.log(this.legendElement);

生成具有正确内容的预期html代码（我在takeControl函数中调用它）。

我尝试了几种方法来修复它

this.element.append(this.legendElement)

也不起作用。

此：

this.element.append(this.legendElement.html())

附加html代码，但不包含 this.legendElement （预期）。

以下

this.element.append($('<div />').append(this.legendElement).html())

做我想做的事，但它看起来就像是一个丑陋的黑客。

所以，我的问题是：发生了什么，我能得到什么

this.element.append(this.legendElement)

上班？

提前致谢！ ^ _ ^

Answer 1

IE11（至少我的版本或设置）不支持element.append。但是，它确实与element.appendChild一起工作。

MDN的浏览器兼容性部分确认IE（与所有其他浏览器相比）从未获得ParentNode.append支持，但始终具有Node.appendChild支持，这似乎是普遍的。

Answer 2

您应该使用通用的el.append()而不是不受支持的el.appendChild()！

• https://caniuse.com/#search=appendchild
• AppGallery Connect

Answer 3

我没有找到导致此错误的原因，但每次我想要追加时，我都会通过构造元素子树（compileLegend函数）来绕过它。它需要一些丑陋的代码来使听众正确，但这是唯一对我有用的东西。