HTML element that imitates another

综合技术 2018-05-18 阅读原文

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!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!

您可能感兴趣的

HTML Email and Accessibility You love HTML emails, don't you? As a developer, probably not... but subscrib...
To be a FE “To be a better girl ” 1. html5 && css3 html5新增元素和标签结构 html5新增特性A...
It’s Not Too Late to Learn How to Code Coding is sort of like a superpower; with it you can create things that millions...
Split string in JavaScript using RegExp ignoring t... I have various instances of strings that I need to split. Following are some exa...
Friday Fun LIX – Parallel Coordinates Chart Aloha from Singapore one more time, Today I have a chart for you which wa...