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!阅读原文】。感谢您的支持!

您可能感兴趣的

第一次经历金三银四,前端面试总结 距离上次面试已经是21个月了,又要面试了,不免忐忐忑忑 小伙伴支招,最起码要投两轮简历吧: 第一轮,投不是最意向的,大公司小公司都投一下试试,了解一下市场对一年多工作经验的前端有什么要求,顺便查漏补缺,练练手,找找感觉; ...
This Ultimate Backend Developer Bundle is only $49... Today's highlighted deal comes via ourOnline Courses section of theNeowin Deals store, where for only a limited time , ...
Js Position of the sliding element im using jsPlumb with jQuery i was wondering if there is a way to get the position of an element while and after dr...
JavaScript 算法与数据结构 JavaScript 算法与数据结构 本仓库包含了多种基于 JavaScript 的算法与数据结构。 每种算法和数据结构都有自己的 README 并提供相关说明以及进一步阅读和 YouTube 视频。 Read this...
Managing focus If I'm building a single page web app, what should happen to focus when the user clicks some navigation? ...