DOM elements exist in two places at once? (bysynchronisation)Is there an “exists” function for jQuery?How do I check if an element is hidden in jQuery?How do I find out which DOM element has the focus?Checking if a key exists in a JavaScript object?How to decide when to use Node.js?How to check if element exists in the visible DOM?How do I remove a particular element from an array in JavaScript?jQuery scroll to elementPure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itRound to at most 2 decimal places (only if necessary)
How can I get a player to accept that they should stop trying to pull stunts without thinking them through first?
Received a dinner invitation through my employer's email, is it ok to attend?
Should disabled buttons give feedback when clicked?
How to say "How long have you had this dream?"
Word meaning to destroy books
Is "De qui parles-tu" (for example) as formal as it is in English, or is it normal for the French to casually say that
Credit score and financing new car
Swapping "Good" and "Bad"
Why weren't bootable game disks ever common on the IBM PC?
Is there any word for "disobedience to God"?
How were Martello towers supposed to work?
What kind of passage I may use this Key and What's the name of this Key?
Some interesting calculation puzzle that I made
Does throwing a penny at a train stop the train?
When an electron changes its spin, or any other intrinsic property, is it still the same electron?
Is a request to book a business flight ticket for a graduate student an unreasonable one?
Historical experience as a guide to warship design?
Why isn't pressure filtration popular compared to vacuum filtration?
Why return a static pointer instead of an out parameter?
What questions should I be able to answer when I want to enter the USA on the 4th time?
How would vampires avoid contracting diseases?
Switching interface VLAN ID Mid-Production
Which star / galaxy is moving away from us the fastest?
Confirming the Identity of a (Friendly) Reviewer After the Reviews
DOM elements exist in two places at once? (bysynchronisation)
Is there an “exists” function for jQuery?How do I check if an element is hidden in jQuery?How do I find out which DOM element has the focus?Checking if a key exists in a JavaScript object?How to decide when to use Node.js?How to check if element exists in the visible DOM?How do I remove a particular element from an array in JavaScript?jQuery scroll to elementPure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itRound to at most 2 decimal places (only if necessary)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Strange question I know, but is there anyway in Javascript or anyother web-based language to make the same DOM element exist in two places at once?
javascript dom
add a comment |
Strange question I know, but is there anyway in Javascript or anyother web-based language to make the same DOM element exist in two places at once?
javascript dom
No. You can clone an element though
– charlietfl
Mar 26 at 1:39
add a comment |
Strange question I know, but is there anyway in Javascript or anyother web-based language to make the same DOM element exist in two places at once?
javascript dom
Strange question I know, but is there anyway in Javascript or anyother web-based language to make the same DOM element exist in two places at once?
javascript dom
javascript dom
asked Mar 26 at 1:30
Andrew HansenAndrew Hansen
578 bronze badges
578 bronze badges
No. You can clone an element though
– charlietfl
Mar 26 at 1:39
add a comment |
No. You can clone an element though
– charlietfl
Mar 26 at 1:39
No. You can clone an element though
– charlietfl
Mar 26 at 1:39
No. You can clone an element though
– charlietfl
Mar 26 at 1:39
add a comment |
3 Answers
3
active
oldest
votes
Gecko-based renderers let you render the same element in multiple places with the element() CSS function.
Note that this only renders the element as image, it does not propagate events backwards to the source element.
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
add a comment |
The DOM is the DOM, regardless of language.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can create or clone element, that is the same through a Node
.
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
add a comment |
That depends what you call "exists".
In SVG, there is the <use>
element, which allows to create deep clones of a reference node in the ShadowTree of the host <use>
element. You'd say yeah, it's just cloning, but, this clone has the particularity of being deeply linked to its source. DOM modifications made on the source will affect the clone, CSS rules applied on the source will also affect the clone at least in SVG2:
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
So technically, the source fragment only exists in one place in the DOM, and it is simply cloned every time. However, given the deep link, for the consumer, it is very close to having it existing in two places at the same time.
Other SVG elements can also get rendered multiple times while existing in a single place in the DOM. <marker>
, and <pattern>
are such elements:
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
So once again, it can be said that they do "exist" multiple times, but in the DOM, they are only once. (really like FF's element()
the8472 mentioned in their answer).
Now if you only mean exists as in node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]
then no.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348626%2fdom-elements-exist-in-two-places-at-once-bysynchronisation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Gecko-based renderers let you render the same element in multiple places with the element() CSS function.
Note that this only renders the element as image, it does not propagate events backwards to the source element.
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
add a comment |
Gecko-based renderers let you render the same element in multiple places with the element() CSS function.
Note that this only renders the element as image, it does not propagate events backwards to the source element.
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
add a comment |
Gecko-based renderers let you render the same element in multiple places with the element() CSS function.
Note that this only renders the element as image, it does not propagate events backwards to the source element.
Gecko-based renderers let you render the same element in multiple places with the element() CSS function.
Note that this only renders the element as image, it does not propagate events backwards to the source element.
answered Mar 26 at 2:10
the8472the8472
28.3k2 gold badges37 silver badges83 bronze badges
28.3k2 gold badges37 silver badges83 bronze badges
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
add a comment |
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
That's actually super useful, is there anyway to do something with event-listeners as well?
– Andrew Hansen
Mar 26 at 2:41
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
@AndrewHansen capture and manually re-dispatch those that you need. but that is very tedious and brittle, I would advise against it.
– the8472
Mar 26 at 17:43
add a comment |
The DOM is the DOM, regardless of language.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can create or clone element, that is the same through a Node
.
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
add a comment |
The DOM is the DOM, regardless of language.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can create or clone element, that is the same through a Node
.
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
add a comment |
The DOM is the DOM, regardless of language.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can create or clone element, that is the same through a Node
.
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
The DOM is the DOM, regardless of language.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can create or clone element, that is the same through a Node
.
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
function clone()
var itm = document.getElementById("items-one").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("items-two").appendChild(cln);
<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>
<button onclick="clone()">Clone Element</button>
edited Mar 26 at 1:41
answered Mar 26 at 1:35
RaymondRaymond
1,1504 silver badges16 bronze badges
1,1504 silver badges16 bronze badges
add a comment |
add a comment |
That depends what you call "exists".
In SVG, there is the <use>
element, which allows to create deep clones of a reference node in the ShadowTree of the host <use>
element. You'd say yeah, it's just cloning, but, this clone has the particularity of being deeply linked to its source. DOM modifications made on the source will affect the clone, CSS rules applied on the source will also affect the clone at least in SVG2:
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
So technically, the source fragment only exists in one place in the DOM, and it is simply cloned every time. However, given the deep link, for the consumer, it is very close to having it existing in two places at the same time.
Other SVG elements can also get rendered multiple times while existing in a single place in the DOM. <marker>
, and <pattern>
are such elements:
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
So once again, it can be said that they do "exist" multiple times, but in the DOM, they are only once. (really like FF's element()
the8472 mentioned in their answer).
Now if you only mean exists as in node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]
then no.
add a comment |
That depends what you call "exists".
In SVG, there is the <use>
element, which allows to create deep clones of a reference node in the ShadowTree of the host <use>
element. You'd say yeah, it's just cloning, but, this clone has the particularity of being deeply linked to its source. DOM modifications made on the source will affect the clone, CSS rules applied on the source will also affect the clone at least in SVG2:
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
So technically, the source fragment only exists in one place in the DOM, and it is simply cloned every time. However, given the deep link, for the consumer, it is very close to having it existing in two places at the same time.
Other SVG elements can also get rendered multiple times while existing in a single place in the DOM. <marker>
, and <pattern>
are such elements:
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
So once again, it can be said that they do "exist" multiple times, but in the DOM, they are only once. (really like FF's element()
the8472 mentioned in their answer).
Now if you only mean exists as in node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]
then no.
add a comment |
That depends what you call "exists".
In SVG, there is the <use>
element, which allows to create deep clones of a reference node in the ShadowTree of the host <use>
element. You'd say yeah, it's just cloning, but, this clone has the particularity of being deeply linked to its source. DOM modifications made on the source will affect the clone, CSS rules applied on the source will also affect the clone at least in SVG2:
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
So technically, the source fragment only exists in one place in the DOM, and it is simply cloned every time. However, given the deep link, for the consumer, it is very close to having it existing in two places at the same time.
Other SVG elements can also get rendered multiple times while existing in a single place in the DOM. <marker>
, and <pattern>
are such elements:
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
So once again, it can be said that they do "exist" multiple times, but in the DOM, they are only once. (really like FF's element()
the8472 mentioned in their answer).
Now if you only mean exists as in node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]
then no.
That depends what you call "exists".
In SVG, there is the <use>
element, which allows to create deep clones of a reference node in the ShadowTree of the host <use>
element. You'd say yeah, it's just cloning, but, this clone has the particularity of being deeply linked to its source. DOM modifications made on the source will affect the clone, CSS rules applied on the source will also affect the clone at least in SVG2:
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
So technically, the source fragment only exists in one place in the DOM, and it is simply cloned every time. However, given the deep link, for the consumer, it is very close to having it existing in two places at the same time.
Other SVG elements can also get rendered multiple times while existing in a single place in the DOM. <marker>
, and <pattern>
are such elements:
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
So once again, it can be said that they do "exist" multiple times, but in the DOM, they are only once. (really like FF's element()
the8472 mentioned in their answer).
Now if you only mean exists as in node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]
then no.
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
onclick = e => // we only modify the source #rect
document.getElementById('rect').setAttribute("height", 20);
:hover #rect
fill: red; /*Firefox is buggy here*/
click to execute DOM modification
<svg>
<rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
<use x="60" xlink:href="#rect"/>
</svg>
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
<svg>
<defs>
<!-- defined only once -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- our marker will get painted twice -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#dot)" marker-end="url(#dot)" />
</svg>
edited Mar 26 at 2:32
answered Mar 26 at 2:24
KaiidoKaiido
50.4k4 gold badges76 silver badges117 bronze badges
50.4k4 gold badges76 silver badges117 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348626%2fdom-elements-exist-in-two-places-at-once-bysynchronisation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
No. You can clone an element though
– charlietfl
Mar 26 at 1:39