2024-04-12 11:19:28 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
|
|
|
|
|
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
|
|
|
|
|
|
|
|
|
|
<p>Click the button to copy an item from one list to another.</p>
|
|
|
|
|
|
|
|
|
|
<button onclick="myFunction()">Try it</button>
|
|
|
|
|
|
|
|
|
|
<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function myFunction() {
|
|
|
|
|
var itm = document.getElementById("myList2").lastChild;
|
2024-05-08 09:57:56 -04:00
|
|
|
console.assert(itm.outerHTML === '<li>Milk</li>', 'Milk');
|
2024-04-12 11:19:28 -04:00
|
|
|
var cln = itm.cloneNode(true);
|
|
|
|
|
document.getElementById("myList1").appendChild(cln);
|
2024-05-08 09:57:56 -04:00
|
|
|
console.assert(document.getElementById("myList1").innerHTML === '<li>Coffee</li><li>Tea</li><li>Milk</li>', 'Coffee, Tea, Milk');
|
2024-04-12 11:19:28 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.error('element.cloneNode.html');
|
|
|
|
|
myFunction();
|
2024-06-01 07:30:03 -04:00
|
|
|
console.exit();
|
2024-04-12 11:19:28 -04:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
