We Keep Coding

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?

Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!

Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();

You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();

first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});

Is there any way we can do append on the next element？

Like, we have <div id='target'></div><div id='footer'></div>
i just want to append <div id='target'></div> , the result will be like
<div id='target'></div><div id='target'></div><div id='footer'></div>
append just append something inside the element,
is there any Jquery method i can do this

Try this:
$("div#target").after($("div#target").clone());
Hope this will help.

$('<div />').after($('#target'))
IDs must be unique, otherwise you will have lots of problems with your selectors later on. The solution above will create a new div element and apend it after your #target

jQuery('<div />').after('div#targetdiv')

Find an element, then insert content after the next

I am struggling with this piece of code for the last few hours now.
Hopefully you can help me :)
What I try to achieve:
Find an element.
Insert html after the element that follows the elment found in (1).
Here's my HTML:
<div class="paragraph" data-template="1" data-id="1"></div>
<div class="icons"></div>
I want to insert after the element with the "icons" class, so I try:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]').next('.icons');
.. where $(data) is a HTML string
That fails.
If I remove the next() function, it inserts before icons, but that is not what I want:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]');
So finding the element works, but not skipping the element after that and then insert.
Cheers,
Robert

since you are looking for next , hopping the div.paragraph is closing like this
<div class="paragraph" data-template="1" data-id="1"> ..something.. </div>
<div class="icons">
if so correcting your code only
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').next('.icons'));
or if div.paragraph is parent of div.icons, means not closing like above do it as
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').find('.icons'));

Try this:
If the .paragraph element is the parent of .icons then next() won't work as that looks for sibling elements. You need to use find() to get the child element:
$('.paragraph[data-id="' + appendAfter + '"]').find('.icons').after(data);

I think what you want is:
$(".paragraph").next().after(data)
You might need to consider what data is - is it html, or an element?

Is this what you mean?
$('.paragraph').next('.icons').after(data);

jQuery CSS Selector combined with "this"

I'm trying to figure out if something like this would be possible. We are given that HTML structure
<a href='#' class='anyLink'>
<!-- here goes some content-->
<div class='childElement'><!-- here goes some content--></div>
</a>
I am not able to use ID's because there are many links and it's not defined how many more are to come. So my question is, do you guys know a way where I can do something like this :
$('a').on("click",function(e){
$(this +"div").val(); // for example.
});
I want to select a children element of that anchor that has been clicked or want to get the value of the children element. I also don't have any ID's of the children elements and I am trying to select things via CSS Selectors as td:nth-child(4).
Could anybody tell me if this is possible ?

try
$('a').on("click",function(e){
$("div",this).text(); // for example.
});

$('a').on("click",function(e){
$(this).children("div").eq(0).html();
});

You are looking for a function called .children().
But you can also try something like this:
$('a').on('click', function( e ) {
$('div', this).val(); // Each div child of this element
$(this).children('div'); // Each div child of this element
});

How to clear all <div>s’ contents inside a parent <div>?

I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="childdiv3" />
</div>
How to clear the contents of all child <div>s inside the master <div> using jQuery?

jQuery's empty() function does just that:
$('#masterdiv').empty();
clears the master div.
$('#masterdiv div').empty();
clears all the child divs, but leaves the master intact.

jQuery('#masterdiv div').html('');

Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.
$('#masterdiv div').empty();
Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.

I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.
document.getElementById('masterdiv').innerHTML = '';

jQuery recommend you use ".empty()",".remove()",".detach()"
if you needed delete all element in element, use this code :
$('#target_id').empty();
if you needed delete all element, Use this code:
$('#target_id').remove();
i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED
ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/

If all the divs inside that masterdiv needs to be cleared, it this.
$('#masterdiv div').html('');
else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.
$('#masterdiv div').each(
function(element){
if(element.attr('id').substr(0, 8) == "childdiv")
{
element.html('');
}
}
);

The better way is :
$( ".masterdiv" ).empty();

$("#masterdiv div").text("");

$("#masterdiv > *").text("")
or
$("#masterdiv").children().text("")

$('#div_id').empty();
or
$('.div_class').empty();
Works Fine to remove contents inside a div

You can use .empty() function to clear all the child elements
$(document).ready(function () {
$("#button").click(function () {
//only the content inside of the element will be deleted
$("#masterdiv").empty();
});
});
To see the comparison between jquery .empty(), .hide(), .remove() and .detach() follow here http://www.voidtricks.com/jquery-empty-hide-remove-detach/

When you are appending data into div by id using any service or database, first try it empty, like this:
var json = jsonParse(data.d);
$('#divname').empty();

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});
or
$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});

try them if it help.
$('.div_parent .div_child').empty();
$('#div_parent #div_child').empty();