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>

Duplicate DIV with input field

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/

JQuery : Remove class, not child content

I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How

Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith

Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}

Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);

How to append text after last css class

I have the following html
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add>
<img src="someImage.jpg">
</div>
Now I'd like to append another div after a click on the add image - but only after the last div with the class "someClass".
If I use the following jQuery it will be appended after each someClass element, so multiple times.
$(".add img").live("click", function() {
$(".containerFooter").after("<div class='someClass'>test</div>");
});
Is there a way to only append it after the last div with the someClass attribute?

You are looking for the :last selector:
$(".someClass:last").after("<div class='someClass'>test</div>");

$('.someClass').last()
OR
$('.someClass:last')
will give you last element of class someclass

Use:
$(".someClass").last().append("<div class='someClass'>test</div>");

$(".add img").live("click", function() {
$(".someClass:last").after("<div class='someClass'>test</div>");
});

Sorry, dint read the question completely in first attempt, updated the ans!
Also your html has a typo , its make it
working demo
$(".someClass").last() //-> selects your last div with id = someClass
.after("<div class='someClass'>test</div>");//-> place the html after the selected div
Actual code below
$(".add").live("click", function(){
$(".someClass").last().after("<div class='someClass'>test</div>");
});
​
​

There may be an easier way, but a jquery class returns an array of applicable objects. So you can find the last such object, create a new jquery object from it, and then operate on that.
<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add">
<button onclick="add()">Add</button>
</div>
</html>

Traversing DOM from span in / out of divs

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>