Question

I am using javascript to inject a few DOM elements into the page. I am able to inject a single DOM element and apply CSS style to it:

var $e = $('<div id="header"></div>');
$('body').append($e);

$e.css({
    background: '#fbf7f7',
});

Problem: If I have nested elements within $e, how can I apply CSS styles to the parents and its children seperately?

var $e = $('<div id="header"><div class="header-content"><span class="title"></span></div></div>');

Answer 1

As you have applied class to div inside parent element you can simply create a style to that class header-content and apply it.

In order to apply styles dynamically you can simply add class for individual elements like this

$('#id-of-element').addClass("header-content");

you can also find elements inside parent element like the one below

$e.find('.header-content').css('background-color', '#ccc');