Linking a DOM element to another element without copying/cloning

Question

I have a single HTML file which contains several computation intensive charts which update themselves regularly. The HTML file only shows small parts of the whole content by using JavaScript and a tab-like interface.

My code looks similar to the following:

<a href="">Tab1</a> <a href="">Tab2</a> <a href="">Tab3</a>
<div>
    <div id="tab1">
        charts
    </div>
    <div id="tab2">
        charts
    </div>
    <div id="tab3">
        charts
    </div>
</div>

Now I would like to (for example) show some contents of tab1 in tab3. I can not copy/clone them, as it would use too much resources. I thought about moving the DOM node between tab1 and tab2 everytime the tab changes. But that is not very convenient. Is there another solution? Can I somehow "link" to the content of another DOM element?

Only solution I see is to give them absolute positioning and just adjust the css when the tab changes. — Brad M, Mar 13 '13 at 14:19
Are you sure that cloning the rendered chart is that intensive? — isherwood, Mar 13 '13 at 14:20
How about re-thinking how your tabs work? Maybe your tabs should behave more like buttons, and you can hide/show elements on the page based on which tab is clicked (rather then each tab activating a different div). — Eric Levine, Mar 13 '13 at 14:24
@BradM I thought about that but it would make layouting and showing several different elements quite complex. — str, Mar 13 '13 at 14:26
@isherwood Currently, I draw about 30 Charts and Chrome does not really feel snappy anymore. So I doubt that cloning will be a viable solution. — str, Mar 13 '13 at 14:27
I'm not sure that "snappy" is a practical goal here. That's why loading graphics were invented. :-) Good luck. — isherwood, Mar 13 '13 at 14:31
@elevine Thanks, I am thinking about that. The only problem with that approach would be to change the order of the elements based on the tab, but that should be doable. — str, Mar 13 '13 at 15:07

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

UPDATE:

Look at this answer here on SO about DOM4 mutation event handlers. Perhaps it is more in line with what you need.

Is there a JavaScript/jQuery DOM change listener?

edited May 23 '17 at 12:04

Community

1
1

answered Mar 13 '13 at 14:21

David L

32,885
8
62
93

I'd probably sniff for a change in the original element rather than running setTimeout, especially if it's a fairly complex structure. – isherwood Mar 13 '13 at 14:22
Not a good solution in this case. As I said, the charts are quite computation intensive and your code just copies them regularly. The browser then has to draw two charts instead of one which again needs more resources. – str Mar 13 '13 at 14:24

score 0 · Accepted Answer · answered Mar 13 '13 at 14:28

0

Or what about using appendTo() (http://api.jquery.com/appendTo/) to move your representation from one tab to another when needed?

answered Mar 13 '13 at 14:28

ocolot

718
6
18

Linking a DOM element to another element without copying/cloning

2 Answers2