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

Question

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;
}

Chellappan வ · Accepted Answer · 2021-10-21 03:53:20Z

1

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

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

answered Oct 21, 2021 at 3:53

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ishaan Gupta · Accepted Answer · 2021-10-21 05:41:47Z

1

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

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

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

 .randomCls{
            background-color:red;
        }

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

answered Oct 21, 2021 at 5:41

ishaan Gupta

3083 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related