We Keep Coding

How to access sub-elements in current object within JavaScript/jQuery?

Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.

First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})

JavaScript: Select an element to a div and update styling

I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}

To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">

jQuery - change style of uncreated div elements

I was trying to searchengine for this, but I'm not sure how to call it exactly.
I can change the style of my div elements successfuly, for example:
$(document).ready($('div.element1').css("float", "left"));
This will successfully change all the elements of class element1 that exist. However, the new (after above is executed) elements will still spawn with old option of float: right;. What is my best/simplest option for permanently changing the style of this div? I can inject it manually after the element is created but that feels wrong to be honest.

It is better if you don't add inline style using .css() method, but instead just add/remove classes having your style, so create a class for all those elements' style.
If the newly created elements have the class you define, then they will have the style too.
Optionally, you can do this:
$(document).on('change or_other_event','your_selectors', function(){
// your code
});
If the new elements have classes element1, element2 ..., you would need something like this:
$(document).on('change','div[class*="element"]', function(){
// your code
});

Just create a new class on your css and then add that class to your new element
.newElement{
color:red//example style
}
$("<div>",{class:'newElement'})

Your code:
$(document).ready($('div.element1').css("float", "left"));
is equivalent to:
var element = $('div.element1').css("float", "left");
$(document).ready(element);
This means any un-drawn elements will not be affected. Instead use:
$(document).ready(function() {
$('div.element1').css("float", "left");
});
The above code ensures changes are made once the page has loaded.

Add style to child element inside target

Currently I have a script that adds a display:block to the target element by matching the ID.
document.getElementById(id).style.display = 'block';
...But i now want to change that so that it add's the style or class to a child DIV element.

You can grab your child element by using this javascript code:
document.getElementById(id)[0].style.display = 'block';
It's just like accessing a certain item inside of an array.

Use jQuery's .css() to add some style and .addClass() to add any class to the target element.
Reference :
CSS
addClass
Hope this helps.

Adding CSS styles to injected DOM elements

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>');

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');

Hi you can add css to any element using .css() method... Try the following example. I have added a div inside $e and applied different style... the thing is to use the id or class of the child inside parent div...
var $e = $('<div id="header"><div id="child"></div></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
$('#child').css("background", "red");

To expand on my comments: if you need to access children regardless of any id or class, then just use $e.children().