In-depth understanding of DOM operations: append() method, element uniqueness and cloning practice

This article discusses the behavioral characteristics of the append() method in JavaScript when processing existing DOM elements. When append() is used for an element that already exists in the DOM tree, it does not create a copy, but moves the element from its original position to its new position. If you need to copy and add elements to the DOM, you should use the cloneNode(true) method for deep cloning to ensure the expected results.

Uniqueness of DOM elements: Core principle

In web front-end development, it is crucial to understand the working mechanism of the Document Object Model (DOM). Each node in the DOM tree is unique, which means that a DOM element can only exist in one position in the DOM tree at any given moment and can only have one parent node. This core principle is the key to understanding the behavior of the append() method.

When you try to add an element that already exists in the DOM tree to another location through the append() method, the browser does not create a new copy. Instead, it "cuts" the element from its current position and then "pastes" it to the end of the specified new parent element. This behavior is similar to the "move" operation in the file system, rather than the "copy" operation.

Behavior analysis of append() method

Consider the following scenario, we have an HTML table and try to reappend all rows within its

into the same :

 

  <meta charset="utf-8">


  

Age	Name
5	John
2	Pete
12	Ann
9	Eugene
1	Ilya

Try to add the line again using the following JavaScript code:

 let tbody = grid.querySelector('tbody');
let rowsArray = Array.from(tbody.rows); // Get all existing rows tbody.append(...rowsArray); // Try to add these rows to tbody again

After executing the above code, you may find that the display of the table has not changed, or that the order of rows has been slightly adjusted (if the order of the original rowsArray does not exactly match the order of the actual child elements in the tbody). This is not the failure of the append() method, but the result of its compliance with the principle of uniqueness of DOM elements. Since each

element in rowsArray is already a child of the tbody, when they are append to the tbody again, they are simply "moved" from the current position to the end of the tbody. Because they are already inside the tbody, this movement may not produce a visual "new" effect, but rather manifests itself as internal reordering or no change.

Implement element copying: cloneNode()

If your goal is to create a copy of an existing DOM element and add it to the DOM tree, the append() method itself is not enough. You need to explicitly create a clone of an element. DOM provides the Node.cloneNode() method to complete this task.

The cloneNode() method accepts a Boolean parameter:

• true: Perform a deep cloning, not only copying the element itself, but also recursively copying all its child nodes and contents.
• false: perform shallow cloning, copying only the element itself and all its properties, but not its children.

To achieve the requirement of copying and adding existing table rows to the end of the table, we need to do a deep cloning.

 let tbody = document.getElementById('grid').querySelector('tbody');
// Use the map method to traverse existing rows and perform deep cloning of each row let clonedRowsArray = Array.from(tbody.rows).map(row => row.cloneNode(true));
// Add the cloned row to the end of the tbody.append(...clonedRowsArray);

After executing this code, you will see that the original rows in the table are preserved, and after them, a set of exactly the same rows are added to achieve the expected copy effect.

Notes and best practices

1. Understand append() and appendChild() : The append() method can accept multiple Node objects or strings as parameters and insert them to the end of the parent element. appendChild() can only accept one Node object and return the added node. Both follow the principle of moving rather than copying when dealing with existing DOM elements.
2. Choose the correct cloning method :
   • If you just need to copy the element itself and its properties without caring about its internal content, you can use cloneNode(false).
   • If you need to copy the element and all its child nodes (including text nodes, other elements, etc.), you must use cloneNode(true).
3. Processing of event listeners : The cloneNode() method will not copy the event listener by default. If the event listener is bound to the original element and the element you want the cloned to have the same behavior, you need to manually rebind the event for the new element after cloning.
4. Uniqueness of ID attributes : The id attribute of the DOM element must be unique in the document. If the cloned element has an id attribute, you need to modify the id of the cloned element before use to avoid conflicts.
5. Performance considerations : A large number of DOM operations, especially deep cloning complex structures, may have an impact on page performance. When performing large amounts of cloning and adding operations, you can consider using a document fragment (DocumentFragment) to batch manipulate the DOM, reducing redrawing and reflow.

By understanding the uniqueness principle of DOM elements and the specific behavior of append() and cloneNode() methods, developers can more accurately control DOM operations, avoid unnecessary confusion, and build efficient and stable web applications.

The above is the detailed content of In-depth understanding of DOM operations: append() method, element uniqueness and cloning practice. For more information, please follow other related articles on the PHP Chinese website!