Completely cut and paste an element - javascript

Can I cut (completely, with all styles and attributes) an element from a location and paste it in another location (like body) with jQuery?
Also, I want to place a string (or tag) in the old location, because I want to change its place to old location at the end of the script.
Can I?
How?

appendTo() will automatically move the matched elements from their current location to the specified container, which seems to be what you want.
You can use after() to insert new content before moving the element:
$("#yourElement").after("<p>Element was there</p>").appendTo("body");

.detach() is more appropriate for this task, as #lvan suggested.
jQuery(jQuery("#yourElement").detach()).appendTo("body");

you can do it by clone
first copy it to another location
$('#yourElement').clone().appendTo('#anotherDiv');
then remove old one,
$('#parentOfOldElement #yourElement').remove();
or you can replace it to get it later
$('#parentOfOldElement #yourElement').replaceWith('<div id="toReplaceAgain">/div>');

insertAfter() and insertBefore() are exactly cut and paste methods.

unless or untill you are not cloning any element all operator will move the selected element from one location to other ex: appendChild , appendTo , insertAfter , insertBefore and so on

Related

jQuery stop append removing div

I am copying a div into another div using append. However it removes the original. I tried to use clone but it seems to only work with appendTo. But appendTo breaks my layout so I have to use append with works fine.
I am wrong that clone will not work with .append and is there another way to stop the div removing?
Thanks
$('.compareWrapper').append(htmlStr)
foo.appendTo(bar)
Take foo and append it to bar.
foo.append(bar)
Take bar and append it to foo
Syntactically they're different. You have to think of what's the target object and what's the destination object. So, having said that you can move ahead in one of two ways:
var $clone = $('target').clone();
$clone.appendTo('wrapper');
$('wrapper').append($clone);
Both do the same thing.
The following does not work?
$('.compareWrapper').append($(htmlStr).clone());
I don't see any reason for .clone() not working with .append(). The code should be:
$('.compareWrapper').append($(htmlStr).clone());
Is that what you tried? From the name of your variable, I'm assuming htmlStr is a string, not a jQuery object.

"replaceWith" not altering contents

The directive replaceWith as used in the code below only changes the target content once. If I send any other object the alert shows the proper value but not the div.
function identify (thisobj) {
alert(thisobj.value);
$("#test").replaceWith(thisobj.value);
}
The target element is shown below.
<div id="canvas_container">
<div id="test">This is a test</div>
</div>
Various objects are being passed, here, each with a different value. But though the Alert() reflects the proper content, the #Test only allows a one time change and then it retains that value forever.
You are replacing #test with your new element. It won't work again unless the element you replace it with also matches that selector.
From the jQuery docs:
The .replaceWith() method removes content from the DOM and inserts new
content in its place with a single call.
Assuming you want to keep the #test element, you can use the html method to replace the contents of it, rather than the element itself.
.replaceWith() substitutes an entire DOM node; you should be using .html(thisobj.value) or .text(thisobj.value)
You have misunderstood the use of replaceWith: it replaces the element you call it on, so after the first use, there is no element #test anymore.
You want text or maybe html:
$("#test").text(thisobj.value);
If your value contains html, use:
$("#test").html(thisobj.value);
replaceWith removes the #test element and replaces it with what you set (thisobj.value).
To replace an element's content, use .html() (or .text()).
function identify (thisobj) {
alert(thisobj.value);
$("#test").html(thisobj.value);
}
replaceWith will replace the entire element, to replace the content within #test, use:
$("#test").html(thisobj.value);
Have you looked into jQuery's text() function? If not, http://api.jquery.com/text/
It may help with replacing text

Opposite of append in jQuery

I use .append to add to a div
$(this).append('<ul><li>test</li></ul>');
how can I search for a <ul> and remove it if it exists in the children of $(this)?
You could use remove(). More information on jQuery remove().
$(this).children("ul").remove();
Note that this will remove all ul elements that are children.
The opposite of .append() is .prepend().
From the jQuery documentation for prepend…
The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).
I realize this doesn’t answer the OP’s specific case. But it does answer the question heading. :) And it’s the first hit on Google for “jquery opposite append”.
Use the remove() method:
$(this).children("ul").remove();
What you also should consider, is keeping a reference to the created element, then you can easily remove it specificly:
var newUL = $('<ul><li>test</li></ul>');
$(this).append(newUL);
// Later ...
newUL.remove();
just had the same problem and ive come across this - which actually does the trick for me:
// $("#the_div").contents().remove();
// or short:
$("#the_div").empty();
$("#the_div").append("HTML goes in here...");
Opposite up is children(), but opposite in position is prepend().
Here a very good tutorial.

jQuery reversing prependTo order

I have a small problem, I have some static content inside a div and I need to add some extra content to it, prependTo works good, but the new content comes after the exisiting one.
appendTo comes before the exisiting content, but each new appended content comes before the previous append.
Hard to explain, so I added a little example here:
http://jsfiddle.net/9j958/
The foo# order is wrong, as you can see. Any way around this?
Reverse the elements before the each call.
$($('tr').get().reverse()).each(
...
);
I'd have two suggestions.
The easier would be to add a empty div to the beginning of your fieldset and append your new elements to that instead of the fieldset directly: http://jsfiddle.net/9j958/9/
Or if for some reason you can't or don't want to change your HTML, then you could keep a reference to the last element you added and append the next element with insertAfter: http://jsfiddle.net/9j958/10/

How to convert an HTML element to a string, including the opening and closing tags?

Suppose I have the following HTML element:
<span id='kuku' class='lala bubu' value='xyz'>some text</span>
I know that .html() returns the inner part of the element, i.e. some text.
How could I get the whole element as string, containing <span>...</span>?
Most browsers support the element.outerHTML property. You may also want to check out the following Stack Overflow post for an alternative solution (for non IE browsers):
How do I do OuterHTML in firefox?
Try this:
alert($('#kuku').clone().wrapAll("<div/>").parent().html());
clones the element you want
wraps it in a div
selects the parent (the new div)
gets the HTML
You can also do it like this:
alert( $('<div>').append( $("#kuku").clone() ).html() );
This one creates an empty div and appends a copy / clone of the element with id kuku to it. It then returns the innerHTML of that previously empty div, which now has in it precisely the HTML you are after.
Simply get the owner of the span. So use the id of the owner/container of the span and use
document.getElementById("urSpanOwnerID").innerHTML

Categories

Resources