How to append html content into iframe?

Question

I tried the code below but it completely replaces the content inside the iframe:

@ViewChild('iframe') iframe: ElementRef;

let content = '<h1>TEST CONTENT</h1>';
let doc = this.iframe.nativeElement.contentDocument;
doc.open();
doc.write(content);
doc.close();

How do I append html content into the iframe without replacing?

Answer 1

this.iframe.nativeElement.contentWindow.frames.document.body.insertAdjacentHTML('beforebegin', contentToAppend);

this worked for me. I get the iframe element in Angular with ElementRef & @ViewChild then dig down to it's HTML body and append HTML content using insertAdjacentHTML method, in the position desired, available as beforebegin, afterbegin, beforeend and afterend.