Is there a better way of duplicating elements?

[Shikkediel]

So I’m working on a little project that requires content to be duplicated and inserted into the DOM. Using jQuery, there’s a simple way for this :

var content = $('#original-element').html();
$('#duplicate-element').html(content);

Point is, I don’t want to ‘violate’ guide lines on using identifiers uniquely. I wrote a bit of script to get all CSS properties and transfer them to the duplicate element – in order to be able to change the identifier value but still keep the original style.
But this can only be used after var content has actually been inserted again, after the second step. So instead of :

content
.children().each(function() {

var tag = $(this).attr('id');
if (typeof tag != 'undefined' && tag !== false) {
var target = $(this)[0];
var styles = document.defaultView.getComputedStyle(target);
$(this).attr('id', tag + '-duplicate');
for (var prop = 0; prop < styles.length; prop++) {
$(this).css(styles[prop], styles.getPropertyValue(styles[prop]));
}
}
});

I have to do :

$('duplicate-element')
.children().each(function() {

...

});

Leaving the non-unique use of identifiers in place for a moment. Am I putting too much weight on this or might there be a better approach?

Many thanks in advance for any thoughts.
Or tweaks to the above code at all (still a work in progress)…

[Senff]

I personally use the jQuery clone() method to duplicate elements:

$('.some-element').addClass('original').clone().insertAfter('.some-element').addClass('cloned');

[GSutherland]

It can be tricky to know what method to use when checking for whether a variable exists. Check out this stackoverflow link where people smarter than me can’t agree on the best method:

http://stackoverflow.com/questions/5113374/javascript-check-if-variable-exists-is-defined-initialized-which-method-is-b

The problem with checking against undefined is that undefined is mutable for whatever reason. Also, you can define a variable with the value of undefined, so… yeah. Not as reliable as it should be.

Just checking like this:

if (batman) { }

won’t account for booleans that are false or anything that has a converted value of 0 and you’ll get an uncaught referenceerror.

It generally depends on the application, but since I try to always know what type my variables are going to be I often just check whether typeof equals what I expect. This is pretty good to do, for instance, with functions if you’re working in a big modular code base that you aren’t in total control of.

if (typeof someFunction === ‘function’) {
someFunction();
}

[Senff]

Using classes would certainly work but I’m trying to make it sort of a plugin that can be used on existing html.

This is exactly the reason I used the clone() method. My Sticky Menu plugin (see below for example) creates a clone of an existing element, and that new clone will have the ID and all the classes that the original element has.

Yes, indeed you can end up with two elements on one page with the same ID. Which is not valid and violates the rules…but it works. After doing much research, it was really the only way I could find to ensure it the clone will have the same styles as the original.

Taking the styles from the original element and then apply them to the new one…in theory that would be great, but it just couldn’t be done without much, much more work. The more I tried, to more problems I ran into.

And so, in the end I just accepted “defeat” and went with the duplicate IDs. In practice, it didn’t break anything for my plugin (but that may have to do with the fact that it was either the original OR the clone visible on the page, and never both at the same time).

http://codepen.io/senff/pen/ayGvD

[Senff]

What I’ve done with my plugin that also clones items, is check the width, padding and position on the page and apply that to the cloned element (because the cloned element is the same in every way except the position, which is set to fixed).

I’m not sure how you do that in your Pen (and I’m not sure if it’s so great to clone the entire body), but instead of using getComputedStyle and getPropertyValue, I use jQuery such as $(this).css('width') which seems to do the trick.

[Author]

Posts