Insert an Element Before or After a Specific Sibling Element

/**
 * Inserts a new HTML element relative to a reference element.
 * @param {HTMLElement} newElement - The element to insert.
 * @param {HTMLElement} referenceElement - The element relative to which `newElement` will be inserted.
 * @param {'before'|'after'} position - Whether to insert 'before' or 'after' the reference element.
 */
function insertElementRelative(newElement, referenceElement, position) {
  if (!newElement || !referenceElement || !referenceElement.parentNode) {
    console.error('Invalid elements provided for relative insertion.');
    return;
  }

  if (position === 'before') {
    referenceElement.parentNode.insertBefore(newElement, referenceElement);
    console.log('Inserted element before reference:', newElement, referenceElement);
  } else if (position === 'after') {
    // Using insertAdjacentElement for 'after' for conciseness
    // Alternatively: referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
    referenceElement.insertAdjacentElement('afterend', newElement);
    console.log('Inserted element after reference:', newElement, referenceElement);
  } else {
    console.warn(`Invalid position: ${position}. Use 'before' or 'after'.`);
  }
}

// Example usage:
// Assume a list item with id='item2' exists in an unordered list.
// const item2 = document.getElementById('item2');
// const newListItemBefore = document.createElement('li');
// newListItemBefore.textContent = 'New Item (before item 2)';
// const newListItemAfter = document.createElement('li');
// newListItemAfter.textContent = 'New Item (after item 2)';

// if (item2) {
//   insertElementRelative(newListItemBefore, item2, 'before');
//   insertElementRelative(newListItemAfter, item2, 'after');
// }