Cloning/moving an element!?

216 views
Skip to first unread message

David Behler

unread,
Jun 20, 2010, 6:48:06 PM6/20/10
to Prototype & script.aculo.us
Hi guys,

while looking for a way to clone an element, I stumbled upon this
thread from 2007:

http://groups.google.com/group/prototype-core/browse_thread/thread/9e943e4b54780d97

Any chance this is some when gonna end up in the core? I think this is
function might be pretty useful sometimes.

Apart from cloning an element I also needed to move an element from
one div to another and I came up with this function which is basically
a wrapper for the insert() function:

Element.addMethods({
appendTo: function(element, newParent, position) {
element = $(element);
newParent = $(newParent);
switch(position) {
case 'top':
newParent.insert({top: element});
break;
case 'bottom':
newParent.insert({bottom: element});
break;
case 'before':
newParent.insert({before: element});
break;
case 'after':
newParent.insert({after: element});
break;
}
return element;
}
});

I don't like the switch part very much and tried to use the position
variable directly but that somehow didn't work...anyone knows why?

Element.addMethods({
appendTo: function(element, newParent, position) {
element = $(element);
newParent = $(newParent);
newParent.insert({position: element});
return element;
}
});
$('test').appendTo('test2', 'top');

Using this function Firebug shows this error: "insert is not a
function".

Anyway, maybe someone else finds this useful aswell :)

David

T.J. Crowder

unread,
Jun 21, 2010, 2:37:40 AM6/21/10
to Prototype & script.aculo.us
Hi,

For cloning, there's always Element#clone[1]. That clones the node
using the underlying DOM cloneNode function, and also handles anything
Prototype might have stored on the node.

> Apart from cloning an element I also needed to move an element from
> one div to another and I came up with this function...
> [snip]
> I don't like the switch part very much and tried to use the position
> variable directly but that somehow didn't work...anyone knows why?
> [snip]
>                 newParent.insert({position: element});

Because that creates a property called "position" on the options
object, exactly the way your earlier code

>                 newParent.insert({top: element});

...creates a property called "top" on the options object. The left-
hand side of a property initializer (and for that matter an
assignment) is used as the name of the property (or variable) to
create, not as a variable _containing_ the name of the property/
variable.

It is possible to do what you want, though:

Element.addMethods({
        appendTo: function(element, newParent, position) {
var options;
element = $(element);
newParent = $(newParent);
options = {};
options[position] = element;
newParent.insert(options);
return element;
    }});

...because the bracketed notation for property access uses strings for
property names, and lets you get the property name string from a
variable.

[1] http://api.prototypejs.org/dom/element/clone/

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com


On Jun 20, 11:48 pm, David Behler <d.beh...@gmail.com> wrote:
> Hi guys,
>
> while looking for a way to clone an element, I stumbled upon this
> thread from 2007:
>
> http://groups.google.com/group/prototype-core/browse_thread/thread/9e...

David Behler

unread,
Jun 21, 2010, 4:10:02 AM6/21/10
to prototype-s...@googlegroups.com
Hi,

thansk for the explantation. Makes sense now.

I totally forgot about the new API docs and only looked at the old docs
(http://www.prototypejs.org/api/element) where the method wasn't around yet.

David

T.J. Crowder

unread,
Jun 21, 2010, 6:39:23 AM6/21/10
to Prototype & script.aculo.us
Hi,

No worries. I didn't realize Element#clone was that new, I'd better go
check my projects to see if I'm using cloneNode directly (if so,
probably best to start using the wrapper instead).

-- T.J. :-)
Reply all
Reply to author
Forward
0 new messages