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/
Related
There is a website with the following div:
<div class="x" style="user-select: none; filter: blur(4px);">
under this div there are a lot of other divs. I would like to know if there is any possibility to delete only this DIV with javascript. So only that one gets deleted and all the divs underneath remain.
I want to get rid of this DIV becouse this div blurs an part of the website text. Just changing the blur(4px) wont work the website has some kind of protection what refreshes this part back to original.
the reason i am searching for an possibility in javascript is because i want to automate this in the browser.(Just deleting DIV manually under developer mode works)
so far i got the following:
var div = document.getElementsByClassName('page-content');
div.remove(); //(but this does not work)
getElementsByClassName() returns a collection. Only single objects have remove() method. You have to apply one of the following:
Use brackets to specify an index of the object you want to get:
div[0].remove()
Use item() method passing the index as well:
div.item(0).remove()
Both ways are equivalent.
As an alternative, you may call querySelector() method:
const div = document.querySelector('.page-content')
It returns a single object (according to the passed CSS selector) so you can use:
div.remove()
Edit:
To remove only the covering div, you may use replaceWith() method and pass the child nodes of that div as an argument:
div.replaceWith(...div.childNodes)
If you want to keep only element nodes, use children property:
div.replaceWith(...div.children)
i have an appended div, what i want is to append a div with the appended one.
please see the codepen of my code which is well explained with comments.
here is the structure i want:
DIV 1 --> DIV 2(append with div1) --> DIV 3(Append to already appended Div 2)
i tried to use appendTo(); and also $('#clsDashRegion_levelThree').find('#clsDashRegion_siteAlmCriticite').append(infoRegionSiteCriDetails); but it does not work. if you can help me please make it work, thank you !
To be honest the code is quite bad. There are much better ways to accomplish what you want, but nevertheless here is your fiddle slightly modified. Please tell me if the behavior is what you want:
https://codepen.io/anon/pen/OjNXWv
One important thing is that the id in the second div that you want to be clickable does not receive direct events because it was generated dynamically. So you have to use event delegation like so:
$(document).on('click','#clsDashRegion_siteAlmCriticite',function() { ...
After the
$('#clsDashRegion_levelTwo').html(infoRegionCriticite);
});
Shouldn't you then call
levelThreeCriticiteDetailsBloc()
Otherwise when you click '#clsDashRegion_siteAlmCriticite' nothing will happen.
I have a div (let's call it potatoes) that I want to appear inside another div (food). The typical way to do this would be:
$("#food").html ( $("#potatoes").html());
However this doesn't accomplish what I want. Instead of using the actual "potatoes" div, jQuery seems to be copying that content into the food div, where the original content still exist in the browser.
I want the ACTUAL div (potatoes) to disappear from its place and to appear in the container div (food) without having to do perform .hide() ... or similar methods.
Reason why? I have selectors that enable and disable buttons in the potatoes div, and they seem to trigger the original potatoes div content, but NOT the duplicate that has been loaded into the food div.
Does that make sense? Can anyone give insight as to why this is and what I should do?
Side note:
$(document).on('click','#button-loaded-with-page', {} ,function(e){
this.disabled = true;
$('#button-inside-potatoes-div').hide();
});
The above example is what I would like to achieve, but does NOT hide the button when the potatoes content has been loaded into food by the .html() method. Instead it hides the original button on the page, and not the duplicated one.
What I am trying to achieve: https://jsfiddle.net/o9kshscj/6/
You can just pass the object to html()
$("#a").html($("#b"));
Demo: Fiddle
You could use append to change the parent. This will move the #potatoes object out of it's current DOM position, into the #food div as a child
$("#food").append($("#potatoes"));
You can just remove the div after replacing like this:
$("#a").html($("#b").html());
$("#b").remove();
$("#button-to-enable").prop("disabled", false);
I am really wondering if jQuery remove function really remove elements from DOM.
First, I looked here but the answers are not convincing.
I encountered this problem when I noticed I am still able to manipulate elements on which I have called remove function.
My code:
<div id="container">
<div id="div">
This is a div
</div>
</div>
var div = $('#div');
$('#div').remove();
$('#container').append(div);
Note: My question is not how to solve this? but I want to understand what's going on here!
Actually, this code doesn't remove the #div from the dom, but if I have any data set to the #div, it will be lost. I am pretty confused now about the behaviour of remove function. Can anyone explain this please?
DEMO
I am convinced that div variable is not just a clone of the dom element, is a reference to it, because when I manipulate the div variable, (like div.html('something')) the div within the DOM get updated.
Or am I wrong?
remove() does indeed remove the element from the DOM.
However in your example, the element has been cached in memory because you assigned it to the div variable. Therefore you can still use it, and append it again, and it will still contain all the events the original did.
If what you say is right, why I loose the data bound to the div so?
If you check the source for remove() you'll see that it calls the internal cleanData function which removes the events and clears the data cache for the element. This is why you lose the information.
If you want to remove the element from the DOM, but keep the elements, use detach() instead.
Here's a fiddle to show the difference: http://jsfiddle.net/2VbmX/
had to delete the assigned variable:
delete div;
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