Creating a deep copy of a div

Question

I'm trying to create a deep copy of a div. What I mean is that when the cloned copy of the div changes color, then the original div should change color as well.

What happens in the clone or in the original, should also happen in other one. Here's a JsFiddle

let clonedEle = $(".one").clone();
    
clonedEle.insertAfter(".one");
    
$(".one").click(function() {
    $(this).css("background-color", "blue");
});

.one {
    background-color: red;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

My goal is to get both divs blue when we click either one. In this example, only one of the divs becomes blue when you click on them instead of both at the same time. How do I achieve this?

`$('.one').css("background-color", "blue");`. What you're asking for could only be done making your `div` a custom element that reacts whenever its style attribute changes, but it can easily be simulated. — connexo, Apr 11 '19 at 05:43
Use $(".one").css("background-color", "blue"); it will work. — Karan, Apr 11 '19 at 05:44
On a side note, [_deep copy_](https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy) of an object doesn't relate to the original object in any way. The two structures are different from each other, entirely. — 31piy, Apr 11 '19 at 05:45
just use `$('.one').css("background-color", "blue")` instead of `$(this).css("background-color", "blue")` — Devsi Odedra, Apr 11 '19 at 05:49

score 2 · Answer 1 · answered Apr 11 '19 at 05:45

$(this) points to only current element and here you wanted to apply color on both the div with same class. So, use $(".one")

Try this -

let clonedEle = $(".one").clone();

clonedEle.insertAfter(".one");

$(".one").click(function() {
  $(".one").css("background-color", "blue");
});

Hope this will help you.

connexo · Accepted Answer · 2019-04-11T06:05:37.050

2

This is just a sample of how you could solve this using a customized built-in element:

class MyDiv extends HTMLDivElement {
  connectedCallback() {
    this.addEventListener('click', () => {
      this.setAttribute('style', 'background-color: #999');
    })
  }
  
  static get observedAttributes() { return ['style'] }
  
  attributeChangedCallback(attr, oldVal, newVal) {
    switch (attr) {
      case 'style':
        if (oldVal === newVal) break; // avoid infinite loops
        const myDivs = document.querySelectorAll('[is="my-div"]');
        for (const div of myDivs) { div.setAttribute('style', newVal) };
        break;
    }
  }
}

customElements.define('my-div', MyDiv, { extends: 'div' });

cloneBtn.addEventListener('click', (e) => {
  let theDiv = e.target.nextElementSibling.cloneNode(true);
  document.body.appendChild(theDiv);
})

<button type="button" id="cloneBtn">Clone the div</button>
<div is="my-div">my div</div>

Try changing the style attribute of any of the my-divelements in the developer tools of your browser. You'll see that any inline style you give to my-div is automatically applied to any other my-div on the document as well.

edited Apr 11 '19 at 06:05

answered Apr 11 '19 at 05:59

connexo

53,704
14
91
128

I have one question why are you using `is` rather than `class`? – Shinjo Apr 11 '19 at 06:09
@Shinjo Otherwise it's not a custom element. This is how customized built-in elements work. Without it being a custom element you would'nt be able to setup an `attributeChangedCallback` for changes on the `style` attribute. You could still do this by setting up a `MutationObserver` if you don't want a custom element. – connexo Apr 11 '19 at 06:11
Though I'm not too sure a `MutationObserver` would be cloned. – connexo Apr 11 '19 at 06:17
@Shinjo I don't get where you're heading. – connexo Apr 11 '19 at 06:18
I think I mistook how it works (the way `attributeChangedCallback()` got called when inline styling got implemented). One more question when would `connectedCallback()` got called? – Shinjo Apr 11 '19 at 06:24
1

That depends on how the element is created and is actually quite a complicated thing. Generally `connectedCallback() ` will be called whenever the element becomes part of the DOM, or moved in the DOM. Also it will be called when an element becomes upgraded (which is what happens when the element has already been parsed but only made known later). – connexo Apr 11 '19 at 07:07

Creating a deep copy of a div

2 Answers2