JavaScript and the DOM

  1. Creating and Inserting DOM Elements
    1. Creating New Nodes
      1. createElement() Method
        1. Creating Element Nodes
          1. Setting Initial Properties
          2. createTextNode() Method
            1. Creating Text Nodes
              1. Use Cases
              2. createDocumentFragment() Method
                1. Purpose and Benefits
                  1. Performance Optimization
                2. Inserting Nodes
                  1. appendChild() Method
                    1. Appending to Parent
                      1. Moving Existing Nodes
                      2. insertBefore() Method
                        1. Positioning Relative to Siblings
                          1. Reference Node Requirements
                          2. Modern Insertion Methods
                            1. prepend() Method
                              1. append() Method
                                1. before() Method
                                  1. after() Method
                                    1. Browser Support
                                      1. Advantages over Legacy Methods
                                    2. Removing Nodes
                                      1. removeChild() Method
                                        1. Legacy Removal Approach
                                        2. remove() Method
                                          1. Modern Removal Approach
                                            1. Browser Support
                                            2. Detaching vs Deleting
                                            3. Replacing Nodes
                                              1. replaceChild() Method
                                                1. replaceWith() Method
                                                  1. Use Cases and Patterns
                                                  2. Cloning Nodes
                                                    1. cloneNode() Method
                                                      1. Deep Cloning
                                                        1. Shallow Cloning
                                                          1. Event Listeners and Cloning
                                                            1. Use Cases

                                                        Previous

                                                        4. Manipulating DOM Elements

                                                        Go to top

                                                        Next

                                                        6. Handling Events