How to Style Dynamically Created Elements With CSS

Cannot apply style to dynamically created elements in javascript

Problem

The default value of the property position of a div is static. When you try to set left/right [..] on static element it has no effect on that element.

static : every element has a static position by default, so the
element will stick to the normal page flow. So if there is a
left/right/top/bottom/z-index set then there will be no effect on that
element. relative : an element's original position remains in the flow
of the document, just like the static value.

Solution

You have to set the position property in your created element to absolute, fixed or relative.

let dynel = document.createElement('div');
dynel.className = 'foo';

dynel.style.position = "absolute"
dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';

document.body.appendChild(dynel);

var foo = document.getElementsByClassName('foo');

foo[0].style.top = '50px';
foo[0].style.left = '200px';

jQuery CSS() for dynamically created elements

There's no event for elements created (not universally available, anyway). You could

Add the rules to a stylesheet so that they are automatically applied to the newly created elements

Chain the css() method when you create your elements:

$('<img id="createdImage" src="some.jpg"/>')
    .appendTo(document.body)
    .css(style);

Create a new stylesheet dynamically:

$("<style>").text("#myNewEl { width:20px; height:30px; }").appendTo("head");

Adding css to dynamically created elements

Class names are case sensitive, try renaming the class for your wrapping div to "rigallery".

how to apply style on dynamically generated element

$('#tb').append('<input type="text" class="YOURCLASS" name = "textBox" style= "width:100px;" id="'+divIdT+'" onkeyup="validate(this,"'+divIdT+'") value="0">');

Applying styles to dynamically created elements in Angular 2

For your dynamically created classes you can style them like this

:host::ng-deep .yourclassnamehere {

}

you can reference this post Angular 2 - innerHTML styling for more information

EDIT: 23/05/2019

The ::ng-deep pseudo-class selector also has a couple of aliases: >>> and /deep/, and all three are soon to be removed.

https://github.com/angular/angular/issues/25160

The situation is still evolving, but right now, ::ng-deep can be used if needed for certain use cases.

In most cases, adding your styles to your global style sheet will solve this issue

How to apply style sheets to dynamically created elements?

It is not dynamically created issue. It is because you haven't set the class to table. As Bootstrap Docs says:

You have to use <thead> and <tbody> for the class to work.

To add in your answer:

var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);

Add this for a quick fix:

$("tr:first-child").wrap("<thead/>");

Your final code should look like:

    var table = document.createElement("table");
    table.setAttribute("id","table");
    var headRow = document.createElement("tr");
    var dataRow = document.createElement("tr");
    var head = document.createElement("th");
    var data = document.createElement("td");
    var thead = document.createElement("thead");
    thead.appendChild(headRow);
    var tbody = document.createElement("tbody");
    tbody.appendChild(dataRow);
    head.innerHTML="head";
    data.innerHTML="data";
    headRow.appendChild(head);
    dataRow.appendChild(data);
    table.appendChild(thead);
    table.appendChild(tbody);
    console.log(document.styleSheets);
    table.className = "table";
    document.getElementById("test").appendChild(table);

Styling elements that are dynamically generated

You can add the class the element using classList.add().

Demo:

var result = [1,2];
var menuMgtCategoryButtons = document.getElementById('menuMgtCategoryButtons');
for(var i = 0; i < result.length;i++){
  var menuCatButton = document.createElement("button");
  menuCatButton.id = "menu-mgt-button-"+result[i];
  menuCatButton.textContent = "Button "+result[i]; // add the text to the button
  menuCatButton.classList.add('new-button'); // add the class to the button
  menuMgtCategoryButtons.appendChild(menuCatButton);
}

.new-button {
  background-color: #4CAF50;
  border: 1px solid;
  color: white;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 20px;
  cursor: pointer;
  width: 120px;
  height:50px;
  white-space: normal;
}

.new-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

<div id="menuMgtCategoryButtons"></div>

Change CSS of dynamically created elements via jQuery

You can call the cardScheme('#29ABDA'); inside the createCard method as below.

Note: I can't see where you are appending the dynamic div $cardDiv to the document, I mean to another existing div or body.

Working snippet:

function cardScheme(color) {    $('.card h3').css('color', color);}
function createCard(id, title, note) {            // Creates a main card div        var $cardDiv = $('<div>', {            class: 'col-md-12 card',            "card-id": id        });            // h3 tag with title of note        var $title = $('<h3>', {            "data-toggle": 'modal',            "data-target": '#update',            click: function() {                updateModal(id, title, note);            }        }).text(title);            // Append to card        $cardDiv.append($title);          $('#container').append($cardDiv);            cardScheme('#29ABDA');}
setTimeout(function(){  createCard('test', 'testTitle', 'test note');}, 2000);  // after 2 seconds

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container"></div>

How can I style dynamically created elements within an iframe?

You can't style the contents of the iframe if the page does not have same domain as your parent. This is to prevent XSS.