Siah wrote:[color=blue]
> 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[/color]
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.
[color=blue]
> 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.[/color]
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
