将ts标签中的离子标签附加到html

Question

I am trying to add a div on the HTML file in my ionic app. I have created new Div and append it to the primary div in the HTML file using .innerHTML but the ionic tags are not being applied.

MY html file

 <div class="vehicle-profile" id="vehicle-profile" style="padding-bottom: 10px;">
    <div class="upload">
        <ion-grid>
          <ion-row>
            <ion-col col-2>
              <div class="upload-small" (tap)="scanBarcode(i)">
                <img src="assets/icon/barcode.png" width="50px">
                <p style="margin: 0"> SCAN</p>
              </div>
            </ion-col>
            <ion-col offset-1 col-9>
              <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[i]"  name="vin_number[{{i}}]" (ngModelChange)="getVehicleInfo($event, i)">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[i]" name="year[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[i]"  name="make[{{i}}]">
            </ion-col>
            <ion-col col-12>
                <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[i]"  name="model[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[i]" name="plat_number[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[i]" name="mileage[{{i}}]">
            </ion-col>
            <ion-col offset-4 col-4>
                <div class="delete-btn" >
                    <button type="button" ion-button block large (click)="removeVehicleBox(i)">
                      <p class="{{i}}">
                          Delete Profile
                      </p>
                    </button>
                  </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
</div>

when i append the same from the .ts file, it wont show the css effect.

TS file

 addVehicleBox(){
    this.num = this.num+1;
    var content = document.createElement('div');      
    content.innerHTML = this.uploadBoxForm(this.num);
    document.getElementById('vehicle-profile').appendChild(content);
  }

  removeVehicleBox(selectedBox){
    console.log(selectedBox)
  }

  uploadBoxForm(i){
    let data = `
    <div class="upload">
    <ion-grid>
      <ion-row>
        <ion-col col-2>
          <div class="upload-small" (tap)="scanBarcode(`+i+`)">
            <img src="assets/icon/barcode.png" width="50px">
            <p style="margin: 0"> SCAN</p>
          </div>
        </ion-col>
        <ion-col offset-1 col-9>
          <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[`+i+`]"  name="vin_number[`+i+`]" (ngModelChange)="getVehicleInfo($event, i)">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[`+i+`]" name="year[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[`+i+`]"  name="make[`+i+`]">
        </ion-col>
        <ion-col col-12>
            <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[`+i+`]"  name="model[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[`+i+`]" name="plat_number[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[`+i+`]" name="mileage[`+i+`]">
        </ion-col>
        <ion-col offset-4 col-4>
            <div class="delete-btn" >
                <button type="button" ion-button block large (click)="removeVehicleBox(`+i+`)">
                  <p class="{{i}}">
                      Delete Profile
                  </p>
                </button>
              </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
    `
    return data;
  }

Here, i have attached the image Showing the effect of using the ion tags in inner html from ts file. 1 is the ion tags written in html file and 2 is the appended ion tags from ts file. .

Is there anyway that i could render the ion tags ?

Answer 1

Are you sure you are adding the css classes and code? I see your second example without

"style="padding-bottom: 10px;"

Could be you are missing css styles in your

var content = document.createElement('div');  

?