HTML element that imitates another


Sounds crazy, but I was just wondering if I could have an element (anything, small or complex) and then have a clone element elsewhere that mimics absolutely everything that is changed on the first element.

I know something like this could be easily achieved using Javascript & jQuery. However any solutions I think of involve having a variable each, (or separate element instances that are modified independently)

For example

<div class="class"></div>
<div class="class"></div>
<div class="class"></div>


This piece of javascript / jQuery would select each element instance, and apply the color blue to each element individually

What I want to know, is if there is a way to change ONE SINGLE ELEMENT, that will reflect on the elements copies.

So the clone elements wont have their own properties that can be changed separately. They literally use the properties of the original element. And when the original elements properties are modified, so are the clones, because their internal state is referencing the original element.

Does such a construct exist?

My reasoning is this:

If you have 1000 elements. Each element is pretty big. An element contains things like:


etc... and EACH attribute is COPIED for each element. That's 1000 copies of .baseURI and .clientWidth right? If so. Thats very bad surely.

If there was ONE element, there would be ONE .attributes, .children etc and all the cloned element would use them.


Ok, more clarification.

Say you had a dynamic select box whose options can change depending on various events that can happen in an event driven javascript/ajax application, and then you have to have multiple copies of the same select box in various places on the page. It'd be so much more efficient to handle one selectbox, and have all the other html copies change automatically, without having to handle them with javascript. I think this would obviously have to be some kind of native support, but i'm not even sure if such native support exists.

It may be one for the HTML5 spec

You have ways to change a unique thing and apply to all elements at same time, and this is one:


If you have a lot of same classes, for example: .testclass and you want to change all background-color's, First, create a file named something like test.css put it into the same root folder of the page.

Put this css into your test.css:

.testclass{ background-color: red;}

Execute that javascript code:

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'test.css') );

Then the javascript will make the page load a new css containing the background-color code for apply to all elements that have the class that are .testclass.

This way you will not have iteration and apply to all elements at same time.


I see what do you want. I have found how to clone DOM, i cloned one, and then did append to body, look this:

$('your_select_identifier').change(function(e){ //when your select has changed...
  $('the_other_select').remove();//here i removed the old one.
  document.body.appendChild($('your_select_identifier')[0].cloneNode()); //here i cloned the DOM Node of your main select and did append on the document body as the new select.

I hope you can do what do you want with this :) (i've spend a time with that kkk.)