Дублирование элемента (и его стиль) с JavaScript

Вам не только нужно будет клонировать, но вы, вероятно, захотите также сделать глубокое клонирование.

node.cloneNode(true);

Документация здесь .

Если глубокий установлен в значение false, ни один из дочерние узлы клонируются. Любой текст, который содержащийся узел не клонирован либо, поскольку он содержится в одном или больше дочерних текстовых узлов.

Если глубокий оценивается как истина, все поддерево (включая текст, который может быть в дочерние текстовые узлы) тоже копируются. За пустые узлы (например, IMG и INPUT элементов) неважно, deep установлен на true или false, но вы по-прежнему необходимо указать значение.

Edit: OP заявляет, что node.cloneNode (true) не копирует стили. Вот простой тест, который показывает обратное (и желаемый эффект) с использованием как jQuery, так и стандартного DOM API:

var node = $("#d1");

// Add some arbitrary styles
node.css("height", "100px"); 
node.css("border", "1px solid red");

// jQuery clone
$("body").append(node.clone(true));

// Standard DOM clone (use node[0] to get to actual DOM node)
$("body").append(node[0].cloneNode(true)); 

Результаты видны здесь: http://jsbin.com/egice3/

Редактировать 2

Хотелось бы, чтобы вы упомянули об этом раньше;) Вычисляемый стиль полностью отличается. Измените свой селектор CSS или примените этот стиль как класс, и у вас будет решение.

Редактировать 3

Поскольку это законная проблема, для которой я не нашел хороших решений, меня это достаточно обеспокоило, чтобы придумали следующее. Это не особо изящно, но выполняет свою работу (протестировано только в FF 3.5).

var realStyle = function(_elem, _style) {
    var computedStyle;
    if ( typeof _elem.currentStyle != 'undefined' ) {
        computedStyle = _elem.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    }

    return _style ? computedStyle[_style] : computedStyle;
};

var copyComputedStyle = function(src, dest) {
    var s = realStyle(src);
    for ( var i in s ) {
        // Do not use `hasOwnProperty`, nothing will get copied
        if ( typeof i == "string" && i != "cssText" && !/\d/.test(i) ) {
            // The try is for setter only properties
            try {
                dest.style[i] = s[i];
                // `fontSize` comes before `font` If `font` is empty, `fontSize` gets
                // overwritten.  So make sure to reset this property. (hackyhackhack)
                // Other properties may need similar treatment
                if ( i == "font" ) {
                    dest.style.fontSize = s.fontSize;
                }
            } catch (e) {}
        }
    }
};

var element = document.getElementById('origin');
var copy = element.cloneNode(true);
var destination = document.getElementById('destination');
destination.appendChild(copy);
copyComputedStyle(element, copy);

См. Статью PPK под названием Получить стили для получения дополнительной информации и некоторых предостережений.