Detach Dom Element

[Siah]

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

 

[RobG]

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.

 

[Martin Honnen]

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.

 

[Siah]

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

Sia