Develop Reference

How to add content on a specific point inside a div

Say I have a div with an id (main comment) and more divs underneath with reply id's. I want to dynamically add the content of the comment to the end at the end of the replies. I can't grab the id of the last reply, but I can grab the id of the main comment (which is also the id of the commentbox which is always at the end. Something like this:
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
I want to add content inside commentArea right before replyToComment_'.id.' ...
I had an idea that probably works and looked like this (I was thinking maybe there was some easier way to do it).
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="newReply"></div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And just add and empty div of newReply at the end of every reply posted...
Any other ideas?

.appendTo() of jQuery is what you need:
http://api.jquery.com/appendto/

Ok I thought about few ways to achieve this goal... "If i understand correctly what you were trying to ask"
By this way you do not need even to use ID as a class.... unless there is a specific reason to this?!?!
If not then move the id to id attribute and give it something like this
id="2,56"
2 = the question || post id
56 = the answer id
by this way you will have more control on your posts and comments
1. if reply_ is an individual class
$('.reply_')[$('.reply_').length - 1].after(comment);
2. if replyToComment_ is an individual class
$('.replyToComment_').before(comment);

I am not sure, I understood your question correctly, but I think .prepend() would help you.
You will need to wrap your last div i.e. <div class="replyToComment_'.id.'"> some button and stuff </div> with some other div and do .prepend() on that parent everytime. Like this:
<div class='parentContainer'>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And do $(".parentContainer'").prepend(newComment) to add comment everytime.

This is how I would do it:
$("#addtxt").click(function () {
$("[class^='replyToComment']").before("<div class='newReply'>" + $("#text").val() + "</div>");
});
Here is the JSFiddle demo

How to get all the child elements of parent div

I want to copy all the child elements of parent div into the text box using jquery.
I tried to find the solution over stackoverflow and google, but did not find any solution. Please help, i will be very greatful. Thanks in advance
<div id="hello">
<div class="sub1">Hello how are you</div>
<div class="sub2">Hello how are you</div>
<div class="sub3">Hello how are you</div>
</div>
</div>
I want to copy all the children elements in the text
The output should come like this:
<input type="hidden" value="<div class="sub1">Hello how are you</div><div class="sub2">Hello how are you</div><div class="sub3">Hello how are you</div></div>" id="textbox">

use html() to get the all the dom and text value
$("#textbox").val($("#hello").html());

Try this
alert($("#hello").html())
$('input:hidden').val($("#hello").html())

to achieve this you can do as below:
var values=$('#hello').html();
$('#textbox').val(values); // textbox is the id of hidden field you specified

Inserting elements into page using jQuery

I have an empty div on my page which I want to insert content into using jQuery.
For example:
<div class="container">
</div>
After inserting the first lot of content, I'd like my markup to look like this:
<div class="container">
<div class="inserted first">blah</div>
</div>
Round 2 of inserting content I'd like it to be:
<div class="container">
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
Round 3 of inserting content I'd like it to be:
<div class="container">
<div class="inserted third">blah</div>
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
How can I achieve this using jQuery?
So far I have tried $(data).appendTo($(".container").before(".inserted")); but that doesn't work.
Update: Thanks for all of your answers. Pretty much all answers so far work. I had to pick one so went for the oldest first. Thanks again to everyone for your help.

You want to insert content before the current child. What you need is the prepend() function:
$(".container").prepend(data);
// assuming data is <div class="inserted second">blah</div>

Use .prependTo() instead of .appendTo().

Use prepend instead of append. Assuming data contains the HTML of
<div class="inserted x">blah</div>
You can use prepend():
$(".container").prepend(data);
Or prependTo():
$(data).prependTo(".container");

Try this:
$('.container').prepend(DOM object or html string);
For example:
$('.container').prepend('<div class="inserted third">blah</div>');

jquery next() outside of div

I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:
$("span.trigger").click(function(){
$(this).next("div.task_description").slideToggle("fast");
});
<span class="trigger">The trigger</span>
<div class="task_description ">
some content
</div>
But the way I need the html setup is:
<div>
<span class="trigger">The trigger</span>
</div>
<div class="task_description ">
some content
</div>
That doesn't work... any suggestions?

In this case you need a .parent() as well, like this:
$("span.trigger").click(function(){
$(this).parent().next("div.task_description").slideToggle("fast");
});
Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:
$(this).closest("div").next("div.task_description").slideToggle("fast");

(Javascript) Inserting elements dynamically in a specific position

Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?

Create your own insertAfter function

you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );