Copy Class or ID to Another HTML Element with jQuery

Posted on April 19, 2015 in jQuery/JavaScript Category with Easy Difficulty

In this simple tutorial you will learn how to copy class or id attribute from one element and apply it to another html element using jQuery, useful when you have some styles in a class and you can't edit the html source to clone it to the other element you need.

View Full HD Video Tutorial

Sample Structure

Supposing that you have a div with 2 class names and another div with a single class name. You want to duplicate the 2 classes to the element with that single class. Here is a sample of what I want to explain you:

<div class="firstClass secondClass">Div 1</div>

<div class="differentClass">Div 2</div>

Copy Element Class or Id with Jquery

And the expected results should be with the desired element containing all classes:

<div class="differentClass firstClass secondClass">Div 2</div>

Copy All Classes from an Element to Another

In this example we will try to copy all classes, using jQuery addClass() function, from a certain element and add them to another element to contain all classes together, in our case using the structure above, to clone the 2 classes from Div 1 to Div 2.

$('.differentClass').addClass( $('.firstClass').attr('class') );

And the results are:

Clone or Copy Class from Element to Another

Get All Classes in Array and Copy Only the Second Class

If you want to apply just one class, for example the second, we can do this by storing the classes in one variable and then break the string where white-space is present. We will use Javascript split() function in order to split a string by character (in our case the character is a blank space) into a simple array. Here is how you do it:

var getClasses = $('.firstClass').attr('class');
var splitClasses = getClasses.split(' ');

$('.differentClass').addClass( splitClasses[1] );

The first variable getClasses is used to store all classes. It will contain a single string "firstClass secondClass" which will used in a second variable splitClasses to split the string, whenever blank space is present, into an array. Results will be:

splitClasses[0] => 'firstClass'
splitClasses[1] => 'secondClass'

Then you can output values for each array position, like I did above. First position of an array start with 0 (zero). To read more about how arrays works check this link.

Sample HTML Structure with IDs and Classes

This is another structure containing a <div> with id attribute and another <div> with 2 classes.

<div id="someId">Div 1</div>

<div class="firstClass secondClass">Div 2</div>

Clone ID from Element and Apply to Another Element inside Class

To copy the id of an element and add it to another element, but inside the class attribute is basically the same thing.

$('.firstClass').addClass( $('#someId').attr('id') );


Copy Element Id inside Element Class

Copy Id from Element to Another

As there is not any jQuery function to add id like we do with classes, we need to use .attr() function to get the id attribute and apply it to another element.

$('.firstClass').attr( 'id', $('#someId').attr('id') );


Copy Element Id to Another Element


This technique is useful when you don't have access to html source or you want a faster and dynamic solution to copy class or id from an element and add it to another. If this solution helped you, make sure to share it to help others. You can check the video tutorial to see a live example or if something is unclear for you.

Related Articles
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

nine − 8 =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.