SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM - Move element?

    I am creating a web app and I want to be able to move an object to another spot.

    Right now what I have done is copy the html of the old one, insert it to the end of the node I want, then delete the old one.

    As a result, I lose events/observers that have been applied (i.e. for double clicking, dragging, etc.)

    Edit: I also have <input> boxes in the element I wanna copy, so if I just get the HTML I lose their values too. If there is some way to copy the whole object, with the "correct" values, applied events, etc.. that would be WONDERFUL!
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    removeChild() return a reference to the node you removed which you can then use insertBefore() or appendChild() to make it be a child of another element.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    removeChild() return a reference to the node you removed which you can then use insertBefore() or appendChild() to make it be a child of another element.
    PERFECT!

    thank you so much
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no need to copy and remove, simply have a reference to the node and use appendChild method. It will then move it.

  5. #5
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    There is no need to copy and remove, simply have a reference to the node and use appendChild method. It will then move it.
    So what would be the method to do it? And as asked, are there any browsers that you are aware of that do not correctly implement this?
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    triexa, you're welcome

    Pepejeria, you're right, the specs says that the call to removeChild() isn't necessary. Do you know if there are any browsers that don't implement that correctly?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works as expected in all browsers that I tested (IE, Firefox, Opera, Safari).

    triexa, simply access the element with getElementById, and then use the appendChild method on the node you want to add it to. It will then move it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •