Take the 2-minute tour ×

So, I have a template div like this:

<div class='container'>
  <div class='mybox invisible' id='template'>
     <span>some stuff</span>

So I want to clone it to create items based on it.

new_item = $('#template').clone()

It works beautifully. BUT, if I run this code ON DOCUMENT READY (to pre-load some items), then everything gets an inline visibility: hidden added (the .mybox div, and ALL its children).

My workaround for now is, instead of pre-loading my items on dom ready, waiting 1 second.

setTimeout (->
), 1000

(yea, coffeescript)

That seems to do the trick, but I'm wondering if there are more elegant solutions.

share|improve this question
It works perfectly here: jsfiddle.net/J2udH –  Andrew Peacock Jun 13 '12 at 17:46

2 Answers 2

up vote 1 down vote accepted

.clone() does not add arbitrary style values to the objects it clones. As such, I think there are only two possible explanations here:

  1. The objects are actually visibility: hidden at document.ready() time and some code is actually making your other object visible later. .clone() just makes copies of the objects as they are. It doesn't add arbitrary style values to them.

  2. Some other code is making your cloned object visibility: hidden after you clone it.

If you showed us your actual page, we could likely figure out what was really happening.

You can debug this yourself by stepping through your code and watching what state things are in as the code runs. Or, you can insert some console.log statements that examine what state things are in.

share|improve this answer

try this code..

//clones the div on window.load and sets attribute id

    new_item = $('#template').clone();


//on document.ready remove class



share|improve this answer
Important comment: The class "invisible" has nothing to do with this, actually. I tried completely removing it (i.e. the template element is visible) at all times, and the problem persists. –  hookdump Jun 13 '12 at 18:09

Your Answer


