如何用JavaScript程序化合并多个HTML元素为单个元素？

To merge sequences of alternating tags (e.g., p/span/p/span/p or h1/span/h1) into a single instance of the starting tag containing all content, you can use the following JavaScript function:

function mergeAlternatingSiblingTags(parent) {
  const children = Array.from(parent.children);
  if (children.length < 2) return; // No elements to merge

  const targetTag = children[0].tagName.toLowerCase();
  // Verify the sequence ends with the same tag as it starts
  if (children[children.length - 1].tagName.toLowerCase() !== targetTag) return;

  // Create the merged element using the target tag
  const mergedElement = document.createElement(targetTag);

  // Copy attributes from the first target element to the merged one
  Array.from(children[0].attributes).forEach(attr => {
    mergedElement.setAttribute(attr.name, attr.value);
  });

  // Iterate through each element to build the merged content
  children.forEach((child, index) => {
    if (child.tagName.toLowerCase() === targetTag) {
      // Append all child nodes of the target tag (preserves nested elements)
      Array.from(child.childNodes).forEach(node => {
        mergedElement.appendChild(node.cloneNode(true));
      });
    } else {
      // Append non-target elements as-is
      mergedElement.appendChild(child.cloneNode(true));
    }

    // Add a space between elements (except after the last one)
    if (index !== children.length - 1) {
      mergedElement.appendChild(document.createTextNode(' '));
    }
  });

  // Replace the original sequence with the merged element
  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }
  parent.appendChild(mergedElement);
}

How to Use It #

1. Identify the parent element that contains the sequence of tags you want to merge. For example, if your HTML is wrapped in a <div class="merge-container">, select it:

   const parent = document.querySelector('.merge-container');
   

2. Call the function:

   mergeAlternatingSiblingTags(parent);
   

Key Features #

• Preserves Nested Elements: If your target tags (like p or h1) contain nested elements (e.g., <b>, <i>), they will be retained in the merged output.
• Copies Attributes: The merged element inherits all attributes from the first target tag in the sequence (e.g., classes, IDs).
• Handles Multi-Element Sequences: Works for any length of alternating sequences (e.g., p/span/p/span/p or h2/div/h2/div/h2/div/h2).

Important Notes #

• Valid HTML Restrictions: Ensure intermediate elements can be legally nested inside the target tag. For example, placing block-level elements (like div) inside a <p> is invalid HTML—browsers will automatically close the <p> before the block element, breaking the merged structure. Stick to inline elements (like span, a, em) for intermediate tags when merging into block-level target tags.
• Whitespace Handling: The function adds a single space between each element's content. If your original content already contains trailing/leading spaces, HTML will collapse multiple consecutive spaces into one, so this won't affect rendering.

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