附加元素在 IE11 中不起作用答案

【问题标题】：Appending element is not working in IE11附加元素在 IE11 中不起作用
【发布时间】：2014-07-11 19:43:26
【问题描述】：

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

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)

上班？

提前致谢！ ^_^

【问题讨论】：

this.compileLegend();究竟返回了什么，this.element的结构是什么？
this.compileLegend() 只是用子元素填充 $('
') 并返回它.. 一些跨度和 imgs ...... this.element 只是 $('
')
我在兼容模式下附加选项时遇到了同样的问题...
只需为新添加的 html 项加载资源，如下所示：jQuery.ajaxSetup({ async: false }); $.get("wwwroot/bootnavbar/bootnavbar.css") .done(function () { // 存在代码 jQuery.ajaxSetup({ async: true }); }).fail(function () { // 不存在代码jQuery.ajaxSetup({ async: true }); });这里有更多信息：stackoverflow.com/a/66488564/14491024

【解决方案1】：

IE11（至少我的版本或设置）不支持 element.append。但是，它确实可以使用 element.appendChild 按预期工作。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：