Why is insertAdjacentHTML converting HTML into an object

Question

Compiling a directive for injection but inserting it into the DOM is not working. Any ideas?

_testHeader = $compile(ABHeaderTemplate)($scope);

_testHeader now equals [<header class="ng-scope">..</header>]

Grab the index so it's not an array.

_testHeader[0] returns <header class="ng-scope">..</header>

Then trying to insert it into DOM

document.body.children[0].insertAdjacentHTML("afterbegin", _testHeader[0]);

returns "[object HTMLElement]"

I've tried using append (to no avail) and I'm compiling the template on load and triggering the appending through an event. Not sure what's going on.

Answer 1

insertAdjacentHTML inserts HTML string. You need appendChild or in your case insertBefore since you want to prepend new content into body:

document.body.insertBefore(_testHeader[0], document.body.children[0]);