如何移除并重新添加div组？背景脚本启停innerHTML失效求助

Hey there! Let's tackle your two technical needs and problems one by one.

1. How to Remove and Re-add a Group of Divs #

There are a couple of reliable approaches to achieve this, depending on whether you need to preserve the divs' state (like event listeners or input values):

Approach 1: Clone and Restore (Preserves State) #

If your divs have attached event listeners or dynamic content you want to keep, use cloneNode(true) to create a deep copy before removing them. Later you can append the clone back to the DOM.

// Step 1: Get the parent container of your div group
const parentContainer = document.getElementById('parent-div');
// Step 2: Save a deep clone of the div group (true = deep clone)
const divGroupClone = parentContainer.querySelector('.your-div-group').cloneNode(true);
// Step 3: Remove the original div group
parentContainer.querySelector('.your-div-group').remove();

// Later, when you need to re-add it:
parentContainer.appendChild(divGroupClone);

Approach 2: Save HTML String and Re-insert (Simple, No State Preservation) #

If you don't need to keep event listeners or dynamic state, saving the HTML content as a string works great:

// Step 1: Get the div group element
const divGroup = document.querySelector('.your-div-group');
// Step 2: Save its HTML content
const divGroupHTML = divGroup.outerHTML;
// Step 3: Remove the element
divGroup.remove();

// To re-add:
const parentContainer = document.getElementById('parent-div');
// Insert the saved HTML into the parent
parentContainer.insertAdjacentHTML('beforeend', divGroupHTML);

2. Fixing InnerHTML Not Working When Re-adding Divs #

The most common reason innerHTML fails here is that you're trying to modify an element that's already been removed from the DOM (so your reference to it is invalid), or you're not targeting the correct parent container. Here's how to fix it:

Common Mistake to Avoid #

If you do something like this, it won't work because divGroup is no longer in the DOM after removal:

// ❌ Wrong: Trying to set innerHTML on a removed element
divGroup.remove();
divGroup.innerHTML = '<div>New content</div>'; // This does nothing
parentContainer.appendChild(divGroup);

Correct Approach #

Instead, either modify the content before removing the element, or work with the parent container's innerHTML when re-adding:

// Option 1: Modify before removal
const divGroup = document.querySelector('.your-div-group');
divGroup.innerHTML = '<div>Updated content</div>';
divGroup.remove();
// Later re-add as before

// Option 2: Use parent container's innerHTML to re-insert
const parentContainer = document.getElementById('parent-div');
const divGroupHTML = '<div class="your-div-group"><div>New content</div></div>';
// Clear parent if needed, then insert
parentContainer.innerHTML = divGroupHTML;
// Or append without clearing:
parentContainer.innerHTML += divGroupHTML;

Another thing to check: Make sure your script isn't running before the DOM is fully loaded. If you're executing code too early, the parent container or div group might not exist yet. Wrap your code in DOMContentLoaded event listener if needed:

document.addEventListener('DOMContentLoaded', () => {
  // Your DOM manipulation code here
});

内容的提问来源于stack exchange，提问作者Leon Flame