Cloning Nodes is Legal!
ChocolateChip provides several methods for dealing with nodes. These are:
- Element.clone()
- Makes a copy of the element.
- Element.empty()
- Deletes all of an element’s child nodes.
- Element.remove()
- Deletes an element.
- Element.wrap()
- Wraps an element with the supplied markup.
- Element.unwrap()
- Removes the markup containing an element, leaving the element in the document.
- $.replace()
- Replaces one element with another.
Element.clone()
The Element.clone() method creates a copy of an element. If a boolean value that evaluates to true is passed, the element will be copied along with all of its child nodes. And if a false value is passed in, the method copies only the element, ignoring its child nodes.
<p>This is a paragraph.</p>
$.ready(function() {
// This will clone the node with its child node, which is a text node.
var p1 = $("p").clone();
// This will output "This is a paragraph"
console.log(p1.text());
// -1 will evaluate as a false boolean.
// This will result in only the barebones p tag being cloned, not its content.
var p2 = $("p").clone(-1);
// This will not output anything since p2 has no child nodes.
console.log(p2.text());
});
Element.empty()
The Element.empty() method will delete all child nodes from the element
<p>This is a paragraph.</p>
$.ready(function() {
// This will remove the text from the above paragraph.
$("p").empty();
});
Element.remove()
This method completely deletes a node from the document. Before deleting the element, it sets any events on the element to null. If you know what events you have bound on that element, you should probably use the Element.unbind() method to remove them before removing the element. That way your events are completely eradicated.
<p>This is a paragraph.</p>
$.ready(function() {
// Delete the above paragraph from the document:
$("p").remove();
});
Element.wrap()
The Element.wrap() method wraps the element in the supplied markup. This is similar to the outerHTML method, except that it outputs true DOM nodes. In order to accomplish this, the method clones the node along with all of its children. It then creates the new markup to wrap around the node and inserts the node inside of the new markup. Then it replaces the node in the document with this newly wrapped node. This means that if you had bound and events to the original node, you will need to reattach them after wrapping. If you intend to do a lot of wrapping/unwrapping, and maintain event binding, then you should use event delegation by bind the events to the parent of the elements you intend to wrap or unwrap and capture the events during the bubbling phase. See the entry “Handing Events” for examples of this technique.
<p>This is a paragraph.</p>
$.ready(function() {
// This will wrap the above paragraph in this div tag:
$("p").wrap("<div id="paragraphWrapper"></div>");
});
Element.unwrap()
The Element.unwrap() method removes the parent element from an element. To do this, it clones the node, then replaces the parent node with the cloned node. As with the Element.wrap() method, any bound events will be removed, but you can use event delegation to avoid this problem.
<div id="paragraphWrapper"><p>This is a paragraph.</p></div>
$.ready(function() {
// This will remove the div surrounding the above paragraph:
$("p").unwrap("");
});
$.replace()
The $.replace() method replaces one element with another. The first argument is the element you want to replace with. The second argument is the element you want to replace. As with the Element.wrap() and unwrap methods, any bound events will be removed, but you can use event delegation to avoid this problem.
<p>This is a paragraph.</p>
$.ready(function() {
var divTag = $.make("<div id="replacementNode">A new div here.</div>");
// This will replace the p tag with the newly created div tag:
$.replace(divTag, $("p"));
});
ChocolateChip Mobile 