Appending element is not working in IE11

Question

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! ^_^

Answer 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.