Develop Reference

Can I add div contents after defining a div child using JavaScript?

Can I add div contents (innerText / textContent) after adding a div in the parent class using JavaScript. I know it's confusing and also I am not sure whether my demand is correct or not.
Can someone just help how to achieve below HTML results using JS.
<div class="container">
<div class="mesg left">
<div class="username">
You
</div>
The main content goes here
<span id="time">08:23am</span>
</div>
</div>
I had tried to achieve this but I my case the content comes up... Like(see the output html from what I have did from JS)
<div class="container">
<div class="description">
The main content goes here
<div class="name">
James
</div>
<span id="time">08:23am</span>
</div>
</div

You can use Node.insertBefore to place the text before the timestamp.
Given your HTML this would work:
const time = document.getElementById("time")
const content = document.createElement("p")
content.innerText = "The main content goes here"
document.getElemenstByClassName("mesg left")[0]
.insertBefore(content, time)

How to have infinite number of copy to clipboard for infinite elements that have same class?

My HTML:
<Div Class='POSTS'>
<Div Class='POST'>
<Div Class='CONTENT'>Text1</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text2</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text3</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text4</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text5</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text6</Div>
</Div>
</Div>
And It Continues Without Any Limit...(Never Ending)
With Different Text Inside Each Element With Class Of "CONTENT".
I Searched Over This Website And Found This :
Https://Stackoverflow.Com/Questions/400212/How-Do-I-Copy-To-The-Clipboard-In-Javascript
But In The Project That I'm Working In I Can't Specify Id On Each Element As You Know It's Infinite Number Of These Elements:
<Div Class='POST'>
<Div Class='CONTENT'>some text</Div>
</Div>
So It Needs To Be Automatically Added.
And I Want To :
When User Clicks On The Text Inside Of Element With The Class Of "CONTENT" (No Matter How Long The Text Is And What It Have) , The Entire Text And Tags And ... Be Copied To Clipbored.
I Don't Want To Set Buttons !
I Want To Make The Whole
Tags,Text,And ....
Be Copied On Each One Of Them Without Any Limits!
By Clicking on it's own text.(imagine this as a textarea that user clicks on text inside of it and js copies all of text but this one is div with text inside of it)
If You Think I Missed Sth And It's Not Clear Enough Let Me Know!
Thanks In Advance!

This should solve your problem.
First select the entire object and then get the element which was clicked. Copy the content.
var posts = document.querySelector(".POSTS");
posts
.addEventListener("click", function (e) {
console.log("index", e.target);
navigator.clipboard.writeText(e.target.innerText).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
});

JQuery. Remove a previous sibling in the DOM tree

I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.

I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);

Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);

check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/

multiple onclick's in HTML

I have a an HTML page with a list of 20 topics on it. I would like it so that when you click on one of those topics, 2 or 3 articles with links pop up underneath it.
I'm trying onclick but it means writing lots of code as you have to declare all the div styles for each of my topics.
Is there an easy way of doing this?
im currently writing this 20 times, and declaring 60 div styles:
<div class = "mousehand"
id = "show_first"
onclick ="this.style.display = 'none';
document.getElementById('show_second').style.display='block';
document.getElementById('dropdown').style.display='inline';
"> show text </div>
<div class = "mousehand"
id = "show_second"
onclick ="this.style.display = 'none';
document.getElementById('show_first').style.display='block';
document.getElementById('dropdown').style.display='none';
"> hide text </div>
<div id ="dropdown"> this is the text to be shown</div>

You can accomplish this with some Javascript. Add a ul within the li:
<li>Title
<ul>
...
</ul>
</li>
Set the inner ul's display to none using CSS. Then using Javascript, make a function that changes the display property of the inner ul to block.

As has been mentioned, jQuery can make this very straightforward, but your major code saving is going to come from taking advantage of event bubbling. You can do this is you structure your HTML something like this:
<div id="topics">
<div class="item">
<div class="show">
show text 1
</div>
<div class="hide">
hide text 1
</div>
<div class="text">
this is the text to be shown 1
</div>
</div>
<div class="item">
<div class="show">
show text 2
</div>
<div class="hide">
hide text 2
</div>
<div class="text">
this is the text to be shown 2
</div>
</div>
</div>
Now instead of attaching an onclick handler to each end every div, attach it to the parent element. To do this with jQuery:
$(window).load(function(){ //Do this when the page loads
$('#topics').bind('click', function(event) { //Find the element with ID 'topics' and attach a click handler
var t = $(event.target); //event.target is the element that was actually clicked, $() gets the jQuery version of it
if(t.hasClass('show')) { //If it is a 'show' element...
t.siblings('.hide').show(); //...show the other two elements...
t.siblings('.text').show();
t.hide(); //...and hide the clicked element
}
if(t.hasClass('hide')) { //If it is a 'hide' element...
t.siblings('.show').show(); //...show the 'show' element...
t.siblings('.text').hide(); //...and hide the other two
t.hide();
}
});
});
And that's it! Here's a demo.

Show a div pertaining to a certain id?

So when I run the following code, I click on a div, and another div slides out.
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
</td></table>
</td></table>
<script>
$(".section").click(function(){
var id = this.id;
$(".under").slideToggle("slow");
});
But, when I click on the div with the class "section", it shows ALL of the divs with the class "under." What I want to do is show the div "under" with an id that is equal to the id of the div selected (i.e. show "under" with id="1" when "section" with id="1" is clicked). How would I do this?

use
.next('div');
so whole code would be
<style>
.under{
display:none;
padding:5px;
background-color:gray;
}
</style>
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
<script>
$(".section").click(function(){
$(this).next('div').slideToggle("slow");
});
</script>
working demo

You can use .next, or depending on how you have things setup, .nextAll. Here is a short demo i did for a question similar to this:
http://jsfiddle.net/andresilich/AeGSQ/

Ok there are a few things wrong with your HTML; I will go through them one by one.
There is no opening <table> or <td> tag. This will result in invalid HTML.
There should be a <tr> tag containing the td tag. It is structurally incorrect as it is at the moment.
I am thinking you're using tables for layout; tables should be used for data-display only, not for page layout.
You have multiple ids the same. The idea of an id is that it identifies one element and one element only. Classes are used to style multiple elements the same.
I have rewritten your code at http://jsfiddle.net/FS3rt/. It also contracts any visible sections so that the user is presented only with the information they would like to see.