Copy element with its properties in mootools

Question

The Following is the code I am using in Mootools,

var company_name = $('company_name-wrapper').clone();
company_name.inject($('wmd-button-bar'));

The HTML is as follows,

<div id="company_name-wrapper" class="form-wrapper" style='float:left;'>
   <div id="company_name-label" class="form-label">
       <label for="company_name" class="required">
          Company
       </label>
   </div>
   <div id="company_name-element" class="form-element">
      <input type="text" name="company_name[]" id="company_name" value="">
   </div>
</div>

..............
..............

<div id='wmd-button-bar'></div>

The Output I am getting after executing the code is,

<div id='wmd-button-bar'>
 <div class="form-wrapper">
   <div class="form-label">
       <label for="company_name" class="required">
          Company
       </label>
   </div>
   <div class="form-element">
      <input type="text" name="company_name[]" id="company_name" value="">
   </div>
 </div>
</div>

The Id's or the style of any elements is not getting cloned.

Any help or suggestion is appreciated, thanks in advance.

Answer 1

Mootools avoids copying ID's to avoid getting double ID's, but you can override that using .clone([contents, keepid]) keepid function paramenters.

So try using: var company_name = $('company_name-wrapper').clone(true, true);

Demo

Notice that doing so you will have duplicate ID's and that is invalid HTML, it will give you problems when you try to refer to different elements with the same ID.