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>
Related
Probably a stupid question, but I couldn't find a direct answer, so how can I change ":not('#home div, .nav')" in to something like ":not('this div, .nav')"? That would allow me reuse the same function for different objects.
$( "#home" ).click(function() {
$("#content .plates").children(":not('#home div, .nav')" ).fadeOut(700);
});
and here is the HTML if needed:
<div id="wrapper">
<div id="content">
<div id="home" class="plates">
<div class="nav"></div>
<div id="one"></div>
<div id="two"></div>
</div>
<div id="about" class="plates">
<div class="nav"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</div>
Thanks for your help!
In the handler, this will be the clicked element, so you could just use this:
$( "#home" ).click(function() {
$("#wrapper #content .plates").children(":not('#"+this.id+" div, .nav')" ).fadeOut(700);
});
The OP is asking for something generic that can be reused on both the "home" and the "about" divs (and maybe on others to be added later?). But, for each one, excluding the "nav" item from the fadeout. So try this:
function myFunc( clickableItem) {
$(".plates:not(" + clickableItem + ")").children( ":not('.nav')" ).fadeOut(700); }
$( "#home" ).click( function(){
myFunc( "#home");
});
$( "#about" ).click( function(){
myFunc("#about");
});
You are using CSS selector :not(), but you can also use jQuery chained function .not(), which subtracts matched elements from another set of matched elements.
The usage is like this:
$(selector1).not(selector2).fadeOut(700);
Where elements in selector2 will get substracted from set matched by selector1.
Let's start from the top. Provided you follow the spec and IDs are unique on your page (as they should be), your click event selector should be just
$("#home").click(function() {...});
Also, the inner selector should be
$("#content .plates").children(...);
There's no need to stack ID selectors in front of other ID selectors since IDs should be unique and selectors are parsed from right to left.
You can use jQuery not to exclude the clicked element.
Code:
$("#wrapper #content #home").click(function () {
$("#wrapper #content .plates").children(':not(.nav)').not($(this)).fadeOut(700);
});
Demo: http://jsfiddle.net/IrvinDominin/dms6u1ww/
$("#wrapper #content #home" ).click(function() {
$("#wrapper #content .plates").children().not($('div', this)).not('.nav').fadeOut(700);
});
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
Basically I've managed to become stuck yet again trying to duplicate a DIV and it's form elements using jQuery.
Button:
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
Div and contents I wish to duplicate
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
I've tried using the clone method, I just can't seem to create a functioning line of code that will duplicate it beneath the first div, and make it ready for PHP multiple data entry.
Thanks!
Something like this would be a start:
$("#addSkill").click(function(e){
e.preventDefault();
var new_skiller = $("#skiller").clone();
new_skiller.attr("id", "skiller-"+$(".row").length);
new_skiller.insertAfter(".row:last");
});
You need to clone and then append() the item inside a div like so:
HTML
<div class="thing">
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
</div>
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
jQuery
$(document).ready(function(){
$('#addSkill').click(function(){
var thing = $('#skiller').clone();
$('.thing').append(thing);
});
});
View the jsFiddle Demo....
Note: you'll need to give them seperate names/make it an array to access
Try this. should work. Note: ID can not be duplicated. the following code will duplicate div with id as well.
$(document).ready(function(){
$('#addSkill').click(function(e) {
var skiller = $('#skiller').clone();
$( "#skiller" ).after( skiller );
});
});
Demo:
http://jsfiddle.net/XpN95/
I have the following HTML code:
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
.
.
.
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
And I have the following JavaScript script:
$('a.child').prependTo('div.container');
But this code, instead of making each a element prepended to their own container, makes all a elements prepended to each of the containers.
How can I fix this?
Thanks!
Iterate over each a.child, and prepend it.
$('a.child').each(function ()
{
var $this = $(this);
$this.prependTo($this.closest('div.container'));
});
http://jsfiddle.net/mattball/tRNUS
You can try the each method:
$('a.child').each(function(){
$(this).prependTo($(this).closest('.container'));
})
Fiddle
div.container and a.child are acting as separate selectors. They aren't related.
You would have to loop over the a.child elements and select the parent element:
$('a.child').each(function() {
var $this = $(this);
$this.parents('div.container').prepend($this);
});
I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.
As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}
Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});
This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>