如何使用原生JavaScript替换两个相似的HTML元素？

Hey there! Let's break down how to swap that plain payment method label with the logo-enhanced version you need. The approach depends on whether you can edit the server-side template or need to do it client-side with JavaScript—here's both options:

Option 1: Server-Side Template Update (Recommended for Static Content) #

If this element comes from a server-side template (like in Shopify, WordPress, or a framework like Laravel), you can directly edit the template file to replace the old code with your new version. This is the cleanest approach since it renders the correct markup from the start.

Original Code: #

<div class="radio__label content-box__emphasis "> 
  <label class="radio__label__primary" for="checkout_payment_gateway_1"> 
    Payment 1 
  </label> 
</div>

Replacement Code: #

<div class="radio__label content-box__emphasis payment-method-wrapper"> 
  <label class="radio__label__primary" for="checkout_payment_gateway_1"> 
    <img alt="Payment 1" class="offsite-payment-gateway-logo" src="payment-1.png"> 
    <span class="visually-hidden">Payment 1</span>
  </label>
</div>

Note: Double-check that the src attribute for the image points to the correct file path of your payment gateway logo.

Option 2: Client-Side JavaScript Replacement (For Dynamic/Third-Party Pages) #

If you can't modify the server template (e.g., a third-party checkout page where you only have script access), use vanilla JavaScript to target the existing element and replace its content.

Here's a working example:

// Wait for the DOM to fully load before running the script
document.addEventListener('DOMContentLoaded', function() {
  // Target the parent div of the original payment label
  const originalElement = document.querySelector('div.radio__label.content-box__emphasis label[for="checkout_payment_gateway_1"]').parentElement;

  // Build the new element structure
  const newWrapper = document.createElement('div');
  newWrapper.className = 'radio__label content-box__emphasis payment-method-wrapper';

  const newLabel = document.createElement('label');
  newLabel.className = 'radio__label__primary';
  newLabel.setAttribute('for', 'checkout_payment_gateway_1');

  const logoImg = document.createElement('img');
  logoImg.alt = 'Payment 1';
  logoImg.className = 'offsite-payment-gateway-logo';
  logoImg.src = 'payment-1.png';

  const hiddenText = document.createElement('span');
  hiddenText.className = 'visually-hidden';
  hiddenText.textContent = 'Payment 1';

  // Assemble the new element
  newLabel.appendChild(logoImg);
  newLabel.appendChild(hiddenText);
  newWrapper.appendChild(newLabel);

  // Replace the original element with the new one
  originalElement.replaceWith(newWrapper);
});

Pro Tip: The visually-hidden span keeps your payment method accessible to screen readers while hiding the text visually—don't skip this for accessibility compliance!

Key Changes to Keep in Mind: #

• Added the payment-method-wrapper class to the outer div for extra styling flexibility
• Replaced plain text with a logo image + accessible hidden text
• Kept the for attribute matched to the input ID to maintain form functionality

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