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

$('.class').css('color','blue');

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:

.attributes
.baseURI
.childNodes
.children
.className

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.

EDIT

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:

CSS.

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( $('').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.

–EDIT–

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.)

Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » HTML element that imitates another

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录