Angular2 add HTML to dynamic elements

Question

I have this code:

import { Component, ElementRef, Renderer2 } from \'@angular/core\';

@Component({
    selector: \'my-app\',
    template: \'

        

Answer 1

What's the problem with this approach?

export class AppComponent{
    @ViewChild('d1') d1:ElementRef;
    @ViewChild('d2') d2:ElementRef;
    @ViewChild('d3') d3:ElementRef;

    constructor(private renderer:Renderer2)  {    }

    runR(){
        let change_this;
        change_this= this.renderer.createElement('span');
        this.renderer.addClass(change_this, 'change_this');
        this.renderer.appendChild(this.d1, change_this);
    }

}

Template: