Detach Dom Element

Discussion in 'Javascript' started by Siah, Jan 22, 2006.

  1. Siah

    Siah Guest

    Hi,

    I'd like to detach some of my dom elements and cache them in an object.
    My current options are to cache its innerHTML, or create an independent
    'div' element and move the element as a child underneath that div
    element. There should be a way for me to just detach my element from
    document's dom tree and be able to set it into a variable.

    Thanks,
    Sia
     
    Siah, Jan 22, 2006
    #1
    1. Advertising

  2. Siah

    RobG Guest

    Siah wrote:
    > Hi,
    >
    > I'd like to detach some of my dom elements and cache them in an object.
    > My current options are to cache its innerHTML


    That is unlikely to be the best option - innerHTML is implemented
    differently in different browsers so results will probably be
    inconsistent, especially if you are dynamically modifying the element.


    > or create an independent
    > 'div' element and move the element as a child underneath that div
    > element. There should be a way for me to just detach my element from
    > document's dom tree and be able to set it into a variable.


    The removeChild method returns a reference to the removed element, so
    keep that reference in a variable (global if it needs to survive beyond
    the life of the function). You could add it to a div that has display =
    'none' to store it in the document, but that seems unnecessary.

    Here is a trivial example:

    <script type="text/javascript">

    // Object to store removed nodes. Use node ID as the key,
    // reference to node as value.
    var removedNodeStore = {};

    function archiveNode(nodeID)
    {
    var n = document.getElementById(nodeID);
    if (n && !(nodeID in removedNodeStore)){
    removedNodeStore[nodeID] = n.parentNode.removeChild(n);
    }
    }

    function restoreNode(nodeID, parentID)
    {
    if (nodeID in removedNodeStore) {
    var p = document.getElementById(parentID);
    p.appendChild(removedNodeStore[nodeID]);
    delete removedNodeStore[nodeID];
    }
    }

    </script>

    <div>
    <input type="button" value="Remove paragraph"
    onclick="archiveNode('para01');">
    <input type="button" value="Restore paragraph"
    onclick="restoreNode('para01', 'div01');">
    </div>
    <div id="div01">
    <p id="para01">Here is the <span style="color: red;">paragraph
    </span> to remove.</p>
    </div>


    Check for support for getElementById before using it.


    --
    Rob
     
    RobG, Jan 22, 2006
    #2
    1. Advertising

  3. Siah wrote:


    > I'd like to detach some of my dom elements and cache them in an object.
    > My current options are to cache its innerHTML, or create an independent
    > 'div' element and move the element as a child underneath that div
    > element. There should be a way for me to just detach my element from
    > document's dom tree and be able to set it into a variable.


    You don't need the div, removeChild e.g.
    someParentNode.removeChild(someChildNode)
    will remove the node someChildNode from the children of the node
    someParentNode and return the removed node.
    <http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>

    And in terms of the DOM if you wanted to store several nodes temporarily
    you could use a document fragment to keep those nodes. But IE 5 does not
    support document fragment nodes for HTML documents.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jan 23, 2006
    #3
  4. Siah

    Siah Guest

    Thanks guys. removeChild is the magic I was looking for.

    Sia
     
    Siah, Jan 23, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Timo Nentwig
    Replies:
    0
    Views:
    873
    Timo Nentwig
    Feb 4, 2004
  2. joe

    detach thread in c?

    joe, Jan 9, 2004, in forum: C Programming
    Replies:
    1
    Views:
    458
    Mark A. Odell
    Jan 9, 2004
  3. Dmitry Teslenko
    Replies:
    2
    Views:
    350
    Dmitry Teslenko
    Nov 9, 2007
  4. Tamer Ibrahim

    Attach and Detach SQL Express Database

    Tamer Ibrahim, Jul 3, 2008, in forum: ASP .Net
    Replies:
    0
    Views:
    517
    Tamer Ibrahim
    Jul 3, 2008
  5. Tamer Ibrahim

    Attach and Detach

    Tamer Ibrahim, Jul 3, 2008, in forum: ASP .Net
    Replies:
    0
    Views:
    375
    Tamer Ibrahim
    Jul 3, 2008
Loading...

Share This Page