How to add styles to a appended div done through Javascript in Css file-CodePudding

this is my html file

                      <div id="addingMembers">

                      </div>

                       <div class="selectMember">
                            <div class="selectTitle" (click)="addMember()">
                                <p class="selectMemTitle">Add a member</p>
                                <mat-icon aria-hidden="false" aria-label="add icon">add_circle_outline</mat-icon>
                            </div>
                        </div>

this is my Javascript File:

  addMember(){
    const x = document.getElementById('addingMembers');   
    x.innerHTML  = 
      `<div id="members">
      Hey I'm added
        </div> 
      `;
}

Here, I want to style my members div using CSS File, but the styles are not applying on it:

#addingMembers #members{
    background-color: red;
}

CodePudding user response：

Use ::ng-deep pseudo-class to disables view-encapsulation. Or move your styles to global styles.

::ng-deep #addingMembers #members{
  background-color: red;
}

CodePudding user response：

Add a class to the control you are adding. Check below sample.

function tes() {
            let change = document.getElementById("addingMembers");

            change.innerHTML = '<input type="text" />';
        }

 .randomCls{
            background-color:red;
        }

<div id="addingMembers">
        </div>
        <input type="button" id="btn1" onclick="tes()" value="Check" />