Appending element is not working in IE11

问题

In constructor I create an element

var this.legendElement = this.compileLegend();

and than later I want to use it in event listener:

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

legendElement is appended, but it is empty! I don't understant why. In other browsers (tested firefox, chrome) it is working.

Also when I print content of this.legendElement I see html code as expected. In other words

console.log(this.legendElement);

produces expected html code with correct content (and I call it inside the takeControl function).

I tried several way to fix it

this.element.append(this.legendElement)

does not work either.

This:

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

appends the html code, but without this.legendElement around it (which is expected).

So the following

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

does what I want it to do, but it just seems like such an ugly hack.

So, my question is: What's happening and have can I get

this.element.append(this.legendElement)

to work?

Thanks in advance! ^_^

回答1:

IE11 (at least my version or settings) did not support element.append. It did, however, work as expected with element.appendChild.

The browser compatibility section of MDN confirms that IE (in contrast to every other browser) has never had ParentNode.append support but has always had Node.appendChild support, which appears to be universal.

回答2:

I did not find reason for this error but I bypassed it by constructing element subtree (the compileLegend function) each time when I wanted to append. It required some ugly code to get listeners right but it's the only thing that worked for me.

来源：https://stackoverflow.com/questions/24705352/appending-element-is-not-working-in-ie11