Testing the Position of Elements: Moving an Element in a Code Test

Example Snippet

Paste this JavaScript into the variation where you want the element move to happen.

(function () {
  // The AB Split Test ID.
  // You can find this in the Code Test body class shown in the test admin.
  // 
  // e.g. test-css-{testId}-{variationNumber} test-css-123-2 
  // var testId = 123; 

  // 1 = first variation, 2 = second variation, etc. 
  var variationNumber = 2; 

  // The element you want to move. 
  // This can be an ID, class, or any valid CSS selector. 
  var elementToMoveSelector = '#testimonials'; 

  // The element that should appear directly before the moved element. 
  // The moved element will be placed immediately after this target. 
  var targetElementSelector = '#analysis'; 

// shouldn't need to change anything else. Paste this code in your website head for the least flicker

  /**
   * Moves an existing DOM element directly after another element.
   *
   * This moves the original element instead of cloning or rebuilding it,
   * which helps preserve existing event listeners, form state, and data
   * attached to that element.
   *
   * Returns true if the element exists and is moved or already in place.
   * Returns false if either selector cannot be found.
   */
  function abstMoveElementAfter(elementToMoveSelector, targetElementSelector) {
    var elementToMove = document.querySelector(elementToMoveSelector);
    var targetElement = document.querySelector(targetElementSelector);

    if (!elementToMove || !targetElement || elementToMove === targetElement) {
      return false;
    }

    // If it is already directly after the target, do nothing.
    if (targetElement.nextElementSibling === elementToMove) {
      return true;
    }

    // Move the original node after the target element.
    targetElement.parentNode.insertBefore(elementToMove, targetElement.nextSibling);

    // Refresh animations, sliders, and layout-aware scripts.
    window.dispatchEvent(new Event('resize'));

    return true;
  }

  /**
   * Runs after AB Split Test has selected the visitor's variation.
   *
   * The move only happens when the selected Code Test variation has added
   * the expected body class.
   */
  function runAbstMove() {
    var variationBodyClass = 'test-css-' + testId + '-' + variationNumber;

    if (!document.body.classList.contains(variationBodyClass)) {
      return;
    }

    abstMoveElementAfter(elementToMoveSelector, targetElementSelector);
  }

  // AB Split Test fires this event after test setup is complete.
  document.addEventListener('ab-test-setup-complete', runAbstMove);

  // Fallback for cases where this snippet loads after the event already fired.
  if (document.body && document.body.classList.contains('ab-test-setup-complete')) {
    runAbstMove();
  }
})();

Example

If your Code Test admin shows this variation class:

body.test-css-456-2

And you want to move #trust-badges directly underneath #main-cta, use:

var testId = 456;
var variationNumber = 2;

var elementToMoveSelector = '#trust-badges';
var targetElementSelector = '#main-cta';

Will This Break Click Events or JavaScript?

Usually, no.

This snippet moves the original DOM element. It does not clone the element, replace its HTML, or rebuild it with innerHTML. That means event listeners attached directly to the moved element usually remain intact.

However, moving elements can still affect behavior that depends on where the element lives in the page. Check carefully if the element contains:

• Forms
• Sliders or carousels
• Maps
• Videos
• Popups
• Scripts that depend on the original parent element
• CSS that depends on the old page structure

The resize event at the end helps many sliders, animations, and layout-aware scripts recalculate after the move.