By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,731 Members | 1,123 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,731 IT Pros & Developers. It's quick & easy.

Detach Dom Element

P: n/a
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

Jan 22 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jan 23 '06 #2

P: n/a


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/
Jan 23 '06 #3

P: n/a
Thanks guys. removeChild is the magic I was looking for.

Sia

Jan 23 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.