I want to create a set of elements to add to a HTML document using JQuery's $(document.createElement()). I know $(document).ready() is required before starting using document elements.
However, is it necessary to use $(document).ready() in order to create elements with $(document.createElement())? In other word, can I use $(document.createElement()) in a document before it is ready?
You can create a new node at any time. But if you're going to be inserting it into the page's DOM, then you'll have to use .ready(), otherwise there's no guarantee that the spot you're trying to insert into exists yet.
I create new nodes before ready when I preload my images in the head... so It's not totally essential as a general rule or anything.
Related
New to javascript...and dom manipulation...Let's say I'm using java-script to construct part of a page that has a bunch of sub-elements.
<div>my-sub-elements</div>
Should I create a stand-alone-div attach the elements inside then attach the whole thing to the DOM?
Or should I attach the elements one by one to the DOM?
You usually will not be able to notice a difference, but in case you really need it then constructing a detached DocumentFragment and attaching it in a single step is faster than messing with the live DOM tree many times.
What is the proper way to create a new client element through javascript in an asp.net page? Also, is it possible to move already created elements inside of the new element without causing too much havoc? Either straight javascript or jquery will work. Thanks.
I would recommend using jquery, because it abstracts out the browser inconsistencies. In jquery, you would use something like:
$('<div>').appendTo('#parent'); // parent is the id of the outer element
to create a new div element. You can use appendTo to add this element inside another dom element. Refer jquery documentation at http://docs.jquery.com/Main_Page
I need to implement undo-redo functionality in my project. But it is very complex and every change affects on many elements. I think saving and restoring whole page will be the best choice. But i have some problems with missing .data() params of DOM elements. I use next functions:
// save
var documentCopy = document.documentElement.cloneNode(true);
// restore
document.replaceChild(
documentCopy,
document.documentElement
);
How I can save and restore whole DOM with saving jQuery.data() of elements?
The trivial thing that I would try is using jQuery's clone instead. Be sure to use it with two true parameters, but be careful as this may be very very slow. Are you sure this is the only way to achieve what you want? Can't you replace a smaller portion of the document?
Note that this doesn't seem to work well with document.documentElement, and that using it with the document's body seems to lose the data on the original elements (say what?). Here's a small test.
Is there an attribute that I can place JavaScript into that executes as soon as the element is finished parsing by the browser?
In effect, I would like to have an onload and be able to pass this as a parameter to a function.
The only work around I have found is specifying an id on the element and passing that to a function (within a SCRIPT tag) immediately after my element.
I'd like this:
<div onload="doSomething(this);"></div>
Instead of this:
<div id="myId"></div>
<script>doSomething("myId");</script>
Also, the solution should be cross browser compatible.
You do not admit to this openly, but the only reason you 'd want to do something like that is in order to iterate over a number of elements and perform the same kind of processing on all of them. If so, you are headed down the wrong path.
Simply give all these elements a common class and then use e.g. document.querySelectorAll to find them and do what you need. You can do this when the load event triggers for the body element.
For normal page loads I don't believe there is that level of granularity. You can detect when ALL of the HTML is loaded and when is has ALL finished rendering. Most people just process things when the page is ready and iterate over the elements in-turn.
My problem is basically quite simple.
After the page has been loaded some elements are added dynamically. I don't seem to be able to access those elements using normal jquery selectors.
Whenever I need to do this, I use livequery. Livequery, basically, allows you to bind events to elements even before they are in the DOM. Have a look, I'm pretty sure that's what you need! : )
maybe .live() could be helpful: http://api.jquery.com/live/