如何使用InnerHTML替换指定class的HTML元素为script标签？

Hey there! Let's work through this problem together. You're trying to replace all those <div> elements with class ad-container (regardless of their unique IDs) with a script tag, and the innerHTML.replace approach you found doesn't quite cut it—let's fix that with proper DOM manipulation.

核心思路：直接操作DOM元素，而非字符串替换 #

The issue with using innerHTML.replace here is twofold: first, it's inefficient to replace the entire body's HTML just to target specific elements, and second, inserting a script tag via innerHTML won't trigger the browser to execute that script (it's a security safeguard). Instead, we'll directly select each target element and replace it with a properly created script node.

步骤1：选择所有目标元素 #

Use document.querySelectorAll('.ad-container') to grab every element with the ad-container class. This works even if each element has a unique ID.

步骤2：遍历并替换每个元素 #

Loop through the selected elements, create a new script element, and replace the old div with this script. Here's the code:

// Grab all ad container elements
const adContainers = document.querySelectorAll('.ad-container');

// Replace each container with your script
adContainers.forEach(container => {
  // Create a new script element
  const customScript = document.createElement('script');
  customScript.src = 'your-script-link-here'; // Replace with your actual script URL

  // Replace the ad container div with the script
  container.parentNode.replaceChild(customScript, container);
});

步骤3：处理动态加载的广告容器（如果需要） #

If the target website loads ad containers dynamically (e.g., when scrolling or after an AJAX call), the above code will only catch elements that exist when the script runs. To handle this, use a MutationObserver to watch for new elements being added to the DOM:

// Set up a MutationObserver to watch for new ad containers
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // Check each newly added node
    const newAdContainers = Array.from(mutation.addedNodes).filter(node => {
      return node.nodeType === Node.ELEMENT_NODE && node.classList.contains('ad-container');
    });

    // Replace any new ad containers we find
    newAdContainers.forEach(container => {
      const customScript = document.createElement('script');
      customScript.src = 'your-script-link-here';
      container.parentNode.replaceChild(customScript, container);
    });
  });
});

// Configure the observer to watch the entire body for changes
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class'] // Also watch for elements getting the ad-container class added
});

关键注意事项 #

• Script Execution: Creating the script element with document.createElement ensures the browser will load and execute it, which doesn't happen when inserting via innerHTML.
• Chrome Extension Timing: Make sure your content script runs after the DOM is ready. In your manifest.json, set "run_at": "document_end" for your content script to ensure elements exist when your code runs.
• Avoid Overwriting Entire HTML: The innerHTML.replace approach you saw is for replacing text in the entire body, which is inefficient and risky here—targeting specific elements is much cleaner.

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