How to append dynamic DOM elements from a directive in Angular 2?

I have an Angular 1.x directive that appends an element. In short:

app.directive('mydirective', function() {
  template: '<ng-transclude></ng-transclude>',
  link: function(el) {
    var child = angular.element("<div/>");
    el.append(child);
  }

I can migrate this directive to Angular 2 like this:

@Directive({
  selector: '[mydirective']
})
export class MyDirective implements OnInit {
  constructor(private elementRef: ElementRef) { }

  ngOnit() {
    var child = angular.element("<div/>");
    this.elementRef.nativeElement.append(child);
  }
}

What's troubling me is this remark in the nativeElement official documentation:

Use this API as the last resource when direct access to DOM is needed.

My question is - how could I properly migrate this directive to Angular 2? My only requirement is to build an element dynamically and append it to the element with the directive.