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.
Related
I've noticed that JS libraries that create DOM trees almost always take a "container" node argument, under which they add their created DOM tree as a child (one example being ReactDOM.render()). It seems like another alternative would be for the function to just create a DOM tree (not yet added to the document) and return the root node of that tree. The caller could then add the tree to wherever it wanted in the document.
I suspect there must be some advantages to the container argument method, because it seems less elegant yet appears to be the widely accepted convention. Are there downsides to creating a DOM tree that isn't yet part of the document?
Creating a new dom element is a function of an existing document. So, you at least need a reference to the document where you want to use the new element. When one would have to pass the document, then why not directly pass the desired parent element?
I'm doing heavy DOM manipulation in JS.
What I do today is creating element (not linking it to document) - perform all heavy stuff on that element, when all completed, linking it to document.
I assume this should be fine - as element is not linked to document during manipulations.
However I reviewed several topics on that, and people were talking there about using:
documentFragment
display = none
Is that anything I should consider, or it's equivalent to what I already do.
Is there any advantage of creating documentFragment over creating regular element as I do?
Any good articles you can propose on that topic?
Thanks!
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.
i have a page with many divs on which i need to implement some JavaScript functions. Is there a way to tell the browser to sort all divs by for example id so that I can find quickly an element.I generally don't know how browsers handle searching of elements, is there some sorting or not on major browsers firefox, chrome, ie? How do elements get indexed?
Every browser already holds a such an index on id's and classes for use with, for example, css.
You shouldn't worry about indexing the DOM, it's been done and ready for use.
If you want to hang events on elements, just do so. Either by use of 'document.getElementById(id) or document.getElementsByClassName(class) (that last one might bump into IE-issues)
I think jquery will help you in that case...
or with simple javascript you can getElementById, or getElementsByTagName
the browsers creates a tree like structure named DOM (Document Object Model), with the root being the html tag for example, then it's children, their children's children, etc..
There are functions that let's you access the DOM and find the required elements. But this is done in the browser's inner implementation. You can not change how it handles the page elements, just use the browser's API to locate elements
I am inserting elements into dom dynamically and for that i m using following steps :(jquery) The initial dom structure is as below:
<div parent div>
</div>
<div child div template>
</div>
clone the parent div using jquery .clone()
clone the child div and do manipulation
append to the cloned parent
do this for all child data
(parentdiv original).replaceAll(clonedparent)
Basically i want to clone the parent div in a manner so that it is available as a
documentfragment and so that appending doesnt happen on the dom and gain performance .
Will jQuery clone() give the performance advantage by behaving like documentfragment?
Or is there a better way to do this? I don't want to construct each child element as HTML string as the structure of them is pretty complex.
jQuery clone() does a plain DOM cloneNode(), except on IE, which inappropriately copies event listeners if you do that. To work around that, on IE jQuery does something utterly ghastly which really you don't want to know about. Which ain't fast.
replaceAll() is also not fast. It has to remove each child node from the DOM (which is particularly slow in jQuery because of its need to check data when removing something from the DOM) and add the new nodes one-by-one.
I don't really see what cloning gets you here really. Just do the manipulations directly on the children. If you've got a lot of manipulations to do and you're triggering relayouts that make it slow, you could temporarily hide the parent or detach it from the document, re-appending it when you're finished.