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')
Related
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();
});
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);
I have the following HTML
<label class="editable" id="user_info_username">Hai world...</label>
now on click function i need the content of the clicked element .
i tried
$(".editable").live("click",function(){
alert($(this).html()) //returns Hai world...
});
But i need the HTML content
so <label class="editable" id="user_info_username">Hai world...</label>
Clone the clicked element, wrap it in a <div>, and then ask for the HTML of that - something like:
var html = $('<div/>').append($(this).clone()).html();
Working demo at http://jsfiddle.net/f88kj/
I also previously wrote a plugin that does this at https://stackoverflow.com/a/6509421/6782
(function($) {
$.fn.outerhtml = function() {
return $('<div/>').append(this.clone()).html();
};
})(jQuery);
if I well understood you need something like .outerHTML property for jQuery
http://forum.jquery.com/topic/jquery-outerhtml-for-jquery
What you're looking for is something like outerHTML. Unfortunately, Firefox does not currently support it, so look for a work-around here: How do I do OuterHTML in firefox?.
Maybe you could use a wrapper, like described below:
html:
<div class="YourHtmlContent">
<label class="editable" id="user_info_username">Hai world...</label>
</div>
and js:
$(".editable").live("click",function(){
alert($('.YourHtmlContent').html())
});
The answer using jQuery.clone() is best IMO, but I'm adding this here as it's another way and might be helpful to others.
You could get the html of whatever the parent div is - this is an issue because there might be siblings which would also be returned.
like so:
alert($(this).parent().html()); //will return siblings too
http://jsfiddle.net/Qg9AL/
i have 2 main div:
<div id="div1">
<div id="minidiv1">a</div>
<div id="minidiv2">b</div>
</div>
<div id="div2"></div>
I want move the minidiv1 into the div2 with jquery
how can i do?
You can simply append it to the div2, and it will change its location in the DOM:
$('#minidiv1').appendTo('#div2');
// or
$('#div2').append('#minidiv1');
The difference of the above two lines is what is returned, appendTo returns the #minidiv element, append will return the #div2 element.
Use the one you find most useful if you want to make more actions (by chaining).
$('#minidiv1').appendTo('#div2');
or
$('#div2').append($('#minidiv1'));
$("#minidiv1").appendTo("#div2")
Luca, did Paul's answer actually work for you? I think you need to be referencing the jQuery object like so:
$($('#minidiv1')).appendTo('#div2');
// or
$('#div2').append($('#minidiv1'));
Otherwise, jQuery will just append the string "#minidiv1" to #div2, rather than moving your existing 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();