Create a copy of an element without altering the original

Question

Create a copy of an element without altering the original

Currently, I am attempting to create a duplicate of a class and ensure that it remains unaffected when the original is altered. So far, I have tried:

$(".newclass").addClass("oldclass");

However, this method does not copy the content.

var _elementClone = $(".oldclass").html();
$(".newclass").html(_elementClone);

This approach successfully transfers all the contents of the div.

My problem arises when any changes are made to the parent class 'oldclass,' such as:

$('.oldclass').hide();

<style> 
.oldclass{visibility:collapse}
</style>

In these instances, the new class also undergoes modifications. How can I create a new class that remains unchanged when alterations are made to its parent?

javascript jquery html css

Answer 1

Answer №1

To make a copy of an element, you can extract its outer HTML, utilize jQuery to modify its ID, class, or other attributes, and then insert it into the Document Object Model (DOM) as independent elements.

FOR INSTANCE

HTML:

<div id="first" class="top">First Div</div>
<div id="second" class="middle">Second Div</div>
<div id="third" class="middle">Third Div</div>
<div id="last" class="bottom">Last Div</div>

Javascript:

var divs=$(".middle");

$.each(divs,function(i,el) {
    var newdiv = $(el.outerHTML);
    newdiv.attr("id",newdiv.attr("id")+"-copy");
    newdiv.removeClass("middle").addClass("middle-copy");
    divs.eq(i).after(newdiv); 
});
$("#second-copy").html("copy of second div");
$("#third").html("original third div");
setInterval('$(".middle-copy").toggle()',1000);

Fiddle: http://jsfiddle.net/1a2b3c4d5e6/

Answer 2

To make a copy of an element, you can extract its outer HTML, utilize jQuery to modify its ID, class, or other attributes, and then insert it into the Document Object Model (DOM) as independent elements.

FOR INSTANCE

HTML:

<div id="first" class="top">First Div</div>
<div id="second" class="middle">Second Div</div>
<div id="third" class="middle">Third Div</div>
<div id="last" class="bottom">Last Div</div>

Javascript:

var divs=$(".middle");

$.each(divs,function(i,el) {
    var newdiv = $(el.outerHTML);
    newdiv.attr("id",newdiv.attr("id")+"-copy");
    newdiv.removeClass("middle").addClass("middle-copy");
    divs.eq(i).after(newdiv); 
});
$("#second-copy").html("copy of second div");
$("#third").html("original third div");
setInterval('$(".middle-copy").toggle()',1000);

Fiddle: http://jsfiddle.net/1a2b3c4d5e6/

Answer 3

Answer №2

When you assign the .newclass to .oldclass in the first line, it means that when you later hide the .oldclass, all elements with the class .newclass will also be hidden. This is because any element with the class .newclass is automatically also a part of the .oldclass.

Instead of trying to hide the individual elements, consider using the function .append() to add a child element to a parent element.

Answer 4

When you assign the .newclass to .oldclass in the first line, it means that when you later hide the .oldclass, all elements with the class .newclass will also be hidden. This is because any element with the class .newclass is automatically also a part of the .oldclass.

Instead of trying to hide the individual elements, consider using the function .append() to add a child element to a parent element.

Create a copy of an element without altering the original

Answer №1

Answer №2

Similar questions

Adding attributes to parent DOM elements of a component in Angular2: A Step-by-Step Guide

Discovering intersection points along a line between the previous and current positions of the mouse in Three.js

Why does i18next only function on http://localhost:3000/de (landing page) in NextJS and not on http://localhost:3000/de/about?

Clicking on numerous hyperlinks using Selenium IDE

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Getting rid of the upper boundaries and outlines of the Bootstrap table

Invisible anchor rows in GWT's UIBinder grid view

Send back a JsonResult containing a collection of objects from an MVC controller

Toggling designs with a simple click

What is the best way to show an image on the screen once a submit button is clicked?

Is it possible to modify the class attribute of an HTML element in PHP upon clicking an input?

Loop through the JSON data and display any empty strings

Ways to ascertain if a view has completed rendering in JavaScript

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

What is the best way to add selected values from a multi-select dropdown into an array?

Stop clicks from interfering with dragging in three.js

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

Implementing a New Port Number on a ReactJs Local Server Every Time

Resize Pictures in Carousel for Smartphones

Steps to seamlessly integrate puppeteer with an active Chrome instance or tab