javascript - is it possible to view one html element twice on the same page, or must I create a duplicate? - Stack Overflow

admin管理员组

文章数量:1277294

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.

I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.

I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.

essentially, this is like a mirror effect, without the flip.

the closest thing I found so far is:

.html

Any remended practices for performing this task are appreciated.

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.

I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.

I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.

essentially, this is like a mirror effect, without the flip.

the closest thing I found so far is:

http://developer.apple./library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html

Any remended practices for performing this task are appreciated.

• javascript
• html
• css

Share Improve this question Follow edited Jul 12, 2013 at 21:48 Taryn 248k5757 gold badges370370 silver badges408408 bronze badges asked Aug 3, 2012 at 20:04 CodeToadCodeToad 4,73466 gold badges4343 silver badges5353 bronze badges 1

• 2 Just like humans, DOM elements can only be at one place at any given time .. for two "you", you need a clone :-) – user166390 Commented Aug 3, 2012 at 20:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).

Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.

If you're using jquery you can use one div and "clone" it. You can read this for more information. http://api.jquery./clone/

If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).

本文标签：