HTML DOM appendChild() Method
Seen in the show html on iPad.
The example below demonstrates the use of the appendChild() Method.
To reset the list refresh the page.
W3C Example
Click on the code shown below to see the result.
The HTML for the manipulation of an unordered list
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<script>
function myFunction() {
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>
Resulting list:
- Coffee
- Tea
- Water
- Milk
- Cat food
The last child of the second list gets moved to the first list. However, the two lists have to be coded exactly as they are shown above. If there are spaces or if the list is coded for readabilty (below) there have to be additional clicks to move the list items.
The formatted HTML for the unordered list
<ul id="myList1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>Milk</li>
</ul>
Node.appendChild() - MDN Web Docs
The W3C example and explanation does not really explain the abstract base class "node".
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).
This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position. The Node.cloneNode() method can be used to make a copy of the node before appending it under the new parent. Note that the copies made with cloneNode will not be automatically kept in sync.
Node - MDN Web Docs
The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Most notable are Document, Element, and DocumentFragment.