(^130) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
Cloning Content
jQuery provides a method called clone() for cloning (copying) content. jQuery’s clone() method,
unlike the DOM cloneNode() method, automatically assumes that you want to copy the element
and all its descendants, so you don’t have to worry about specifying whether you want to clone
descendant elements. Also unlike the DOM cloneNode() method, you have the option of cloning
the element’s event handlers (as well as those of descendant elements), which cannot be done with
JavaScript’s DOM manipulation methods. If you want to clone the element’s event handlers, all you
have to do is specify boolean true as the fi rst argument to jQuery’s clone() method. The following
document, Example 4-15, demonstrates jQuery’s clone() method:<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>John Lennon Albums</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 4-15.js'></script>
<link href='Example 4-15.css' rel='stylesheet' />
</head>
<body>
<form action='javascript:void(0);' method='get'>
<h4>John Lennon Albums</h4>
<table class='johnLennonAlbums'>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr id='johnLennonAlbumTemplate'>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>John Lennon/Plastic Ono Band</td>
<td> 1970 </td>
</tr>
<tr>
<td>Imagine</td>
<td> 1971 </td>
</tr>
<tr>
<td>Some Time in New York City</td>
<td> 1972 </td>
</tr>
<tr>
<td>Mind Games</td>
<td> 1973 </td>
</tr>