How to copy all the attributes of one element and apply them to another?

How do I copy the attributes of one element to another element?


<select id="foo" class="bar baz" style="display:block" width="100" data-foo="bar">...</select>

<div>No attributes yet</div>


var $div = $('div');
var $select = $('select');

//now copy the attributes from $select to $div



You can use the native Node#attributes property:

var $select = $("select");
var $div = $("div");

var attributes = $select.prop("attributes");

// loop through <select> attributes and apply them on <div>
$.each(attributes, function() {
    $div.attr(, this.value);


Pretty Simple

function cloneAttributes(element, sourceNode) {
  let attr;
  let attributes =;
  while(attr = attributes.pop()) {
    element.setAttribute(attr.nodeName, attr.nodeValue);

We could also try extending the jQuery prototype ($.fn) object to provide a new method that can be chained to the jQuery() function.

Here's an extension of @pimvdb's solution to provide a function that copies all attributes

The usage would be like so:


The extension function can be defined like so:

(function ($) {

    // Define the function here
    $.fn.copyAllAttributes = function(sourceElement) {

        // 'that' contains a pointer to the destination element
        var that = this;

        // Place holder for all attributes
        var allAttributes = ($(sourceElement) && $(sourceElement).length > 0) ?
            $(sourceElement).prop("attributes") : null;

        // Iterate through attributes and add    
        if (allAttributes && $(that) && $(that).length == 1) {
            $.each(allAttributes, function() {
                // Ensure that class names are not copied but rather added
                if ( == "class") {
                } else {
                    that.attr(, this.value);


        return that;


An Example is available at

Hope this helps.


A non-jquery solution:

function copy(element){
    var clone = document.createElement(element.nodeName);
    for(key in element){
    return clone;

It copies methods and other stuff you probably don't need, but hopefully you don't mind. This code is small and simple.


ES6 syntax one liner:

function cloneAttributes(target, source) {
  [...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) })

And as noted in the first comment - you would probably don't want to copy the source id attribute... so this one will save it as a 'data-id' attribute in case you need a reference.

function cloneAttributes(target, source) {
  [...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName === "id" ? 'data-id' : attr.nodeName ,attr.nodeValue) })

I'm facing same problem and after invested lots of time and effort i am creating thisclone textarea into editable div with same attribute

select.getAttributeNames().forEach(attrName => {
  $(div).attr(attrName, inputData.getAttribute(attrName));

Since Firefox 22, Node.attributes is no longer supported (not implemented by other browsers and removed from the spec). It is only supported on Element (Element.attributes).


A working solution on jsfiddle


Updated jsfiddler


    var destination = $('#adiv').eq(0);
    var source = $('#bdiv')[0];

    for (i = 0; i < source.attributes.length; i++)
        var a = source.attributes[i];
        destination.attr(, a.value);


<div id="adiv" class="aclass">A class</div>
<div id="bdiv" class="bclass">B class</div>

That's copying #bdiv attributes to #adiv.


You can try this:

function copyAttributes(from, to)
    each(function(){$(to).attr(this.nodeName, this.nodeValue);});

  return $(to);

The return statement lets you write things like:

copyAttributes(some_element, $('<div></div>')).append(...) ...

Hope this helps.


Javascript solution

Copy the attributes of old element to the new element

const $oldElem = document.querySelector('.old')
const $newElem = document.createElement('div')

Array.from($oldElem.attributes).map(a => {
  $newElem.setAttribute(, a.value)

Replace the old element with the new element, if required

$oldElem.parentNode.replaceChild($newElem, $oldElem)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.