Develop Reference

How to insert a div after another jquery

I have a div in html page:
<div id="home">
</div>
Now I want to put another div under the div with id=home. I mean under the other div:
<div id="home">
</div>
<div id="new">
</div>
This is my jquery code:
var div=$('div');
var sopra=$('#home');
sopra.append(div);
But this code is wrong because put the new div in the div with id=home.
Anyone can help me?

You could use .after() function :
var div=$('<div id="new">new</div>');
var sopra=$('#home');
$( sopra ).after( div );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">home
</div>
Or also using .insertAfter() function :
var div=$('<div id="new">new</div>');
var sopra=$('#home');
$( div ).insertAfter( sopra );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">home</div>
The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.
Hope this helps.

Pure JavaScript:
You can do it using insertAdjacentHTML() method:
document.getElementById('home').insertAdjacentHTML('afterend', '<div id="new"></div>');
afterend means after closing </div> tag.
Snippet:
document.getElementById('home').insertAdjacentHTML('afterend', '<div id="new">new</div>');
<div id="home">home</div>

copy text from one div to other div using javascript

<div id="noty">Hello</div>
<div id="noty">World</div>
<div id="noty">Nation</div>
<div id="textArea"></div>
$("#noty").click(function() {
$("#textArea").html($("#noty").html());
});
I'm using this to copy text from one div to other by onclick function. But this is not working. It's only working on the first div. Is there any way to accomplish this ?

Use something like this:
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>
<script>
$(".noty").click(function() {
$("#textArea").html($(this).html());
});
</script>
https://jsbin.com/giqilicesa/edit?html,js,output

Like this.
$(".noty").click(function(e) {
$("#textArea").html(e.target.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>

Yes. var s = ''; $('.noty').each(function () {s += $(this).html();}); $('#textarea').html(s); but change your divs to use class="noty" instead of id. The id should be unique.

At first, you must not use multiple id attribute. And another problem is sizzle providing jQuery as a selector engine returns result to use getElementById. It means even if you've declared multiple ids, you'll get just only one id element. When consider those problems, you can get over this problem to follow this way:
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>
<script>
var $noty = $('.noty');
var $textarea = $('#textArea');
$noty.click(function () {
var text = Array.prototype.map.call($noty, function (el) {
return $(el).html();
}).join(' ');
$textarea.html(text);
});
</script>

How to add div dynamically inside a div by class - Jquery

I want dynamically add info div into every dynamic class.
HTML
<div id='container'>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
I want like this.
<div id='container'>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
</div>
JS FIDDLE

You can use $.wrapInner method
$(".dynamic").wrapInner('<div class="info">info</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
</div>

To add an info div into every class using jQuery, simply use:
$( ".dynamic" ).append( "<div class='info'>info</div>" );
The JSFiddle demonstrates it.
If you want to continually check for .dynamic classes, you can use something like this:
$(document).ready(setInterval(function(){
$( ".dynamic" ).append( "<div class='info'>info</div>" );
}, 1000));
In the above case, you are checking for .dynamic classes every 1000ms (1 second).
Hope this helps.

Try using append():
$('.dynamic').append($('<div/>', { class: 'info' }).html('info'));
Update your fiddle:
http://jsfiddle.net/4cncLor7/2/
If your .dynamic div already contains content and you want to at the .info div at the beginning use prepend():
$('.dynamic').prepend($('<div/>', { class: 'info' }).html('info'));

I have updated it. Please check and give me feedback.
http://jsfiddle.net/4cncLor7/4/
jQuery('.dynamic').html('<div class="info">info</div>');

You could do something like this:
$('.dynamic').each(function() {
var newDiv = $('div');
newDiv.addClass('info');
newDiv.html('info');
//inject the new div
$(this).append(newDiv);
});

check this code : Example
Javascript:
var vof=$("#box1").val();
//$(".result-box").text(vof);
var e = $('<div class="result-box">'+vof+'</div>');
$('#box').append(e);
HTML :
<div id="box">
<!--<div class="result-box" id="rbx"></div>-->
</div>
here i am creating dynamic div so that every time button is clicked it create new div and you can add attribute id to them separately

If I hover over an element, how can I select all sibling elements before it and including it, in jQuery?

I have the html:
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
I have the following javascript:
$(document).on('mouseover', 'div', function() {
var elements = ''; // <-- What should I put here?
});
If I'm hovering over div#three I want the variable elements to be a collection of div#one, and div#two, div#three
How can I achieve this in jQuery?

You can do:
var elements = $(this).prevAll("div").addBack()

How to target a div by class name inside another class

I have some divs like this.
<div class"parent">
<div class"child">
Some Stuff Here
</div>
</div>
<div class"parent">
<div class"child">
Some other kinda Stuff Here
</div>
</div>
I want to click parent class and show the child class only inside that parent without showing the other children classes in other parent classes.
$(document).on('click', '.parent', function(){
$(this).find($('.child').show(500));
});

Pass a selector string to find() not an object - you are passing a jQuery object. You also have invalid HTML because class"parent" should be class="parent".
Demo
$(document).on('click', '.parent', function(){
$(this).find('.child').show(500);
});

First of all you need to correct your markup as there should be = between attribute class and its value. So markup should be like :
<div class="parent">
<div class="child" >
Some Stuff Here
</div>
</div>
Try this :
$(document).on('click', '.parent', function(){
$(this).children('.child').show(500);
});
Demo

You need to correct the HTML as
<div class="child">
'=' is missing in your markup
The following line is enough:
$(document).on('click', '.parent', function(){
$(this).find('.child').show(500);
});

Do no use selector $('.child') in find, as it will return all the child in DOM and find , $(this).find($('.child').show(500)); should be $(this).find('.child').show(500);
Also correct the html, class"parent" should be class="parent", same applies to class"child"
Live Demo
$(document).on('click', '.parent', function(){
$(this).find('.child').show(500);
});