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