JavaScript 动态封装：将无父容器的 HTML 元素包裹进新的 div

<input type="checkbox" class="some_class" id="element_1">
<input type="checkbox" class="some_class" id="element_2">
<input type="checkbox" class="some_class" id="element_3">

<div class="example" id="new_div">
  <input type="checkbox" class="some_class" id="element_1">
  <input type="checkbox" class="some_class" id="element_2">
  <input type="checkbox" class="some_class" id="element_3">
</div>

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var newDiv = document.createElement("div");
newDiv.setAttribute('class', 'example');
newDiv.setAttribute('id', 'new_div');

var input = document.getElementById("element_3"); // 假设这是最后一个要包裹的元素
insertAfter(input, newDiv);

<input type="checkbox" class="some_class" id="element_1">
<input type="checkbox" class="some_class" id="element_2">
<input type="checkbox" class="some_class" id="element_3">
<div class="example" id="new_div"></div> <!-- 新 div 只是被添加，并未包裹 -->

/**
 * 在参考节点之后插入一个新节点。
 * @param {Node} referenceNode - 参考节点。
 * @param {Node} newNode - 要插入的新节点。
 */
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// 1. 创建新的父容器 div
const newDiv = document.createElement("div");
newDiv.id = "new_div";
newDiv.classList.add("example"); // 添加 class

// 2. 识别所有需要被包裹的元素
const targetElements = document.querySelectorAll(".some_class"); // 假设通过类名选择

if (targetElements.length > 0) {
  // 3. 确定插入点并插入空 div
  // 将新 div 插入到最后一个目标元素之后
  const lastTargetElement = targetElements[targetElements.length - 1];
  insertAfter(lastTargetElement, newDiv);

  // 4. 遍历并移动目标元素到新 div 内部
  targetElements.forEach(element => {
    newDiv.append(element); // 使用 append() 将元素移动到 newDiv 内部
  });
}

<label for="plugin_delete_me_shortcode_password">Password</label>
<input type="password" autocomplete="off" autofocus="autofocus" id="plugin_delete_me_shortcode_password" name="plugin_delete_me_shortcode_password">
<input type="checkbox" class="togglePw" id="pw_3" onclick="showPassword('plugin_delete_me_shortcode_password')">
<label for="pw_3" class="fa"></label>

// 辅助函数：在参考节点之后插入一个新节点
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// 1. 创建新的父容器 div
const newDiv = document.createElement("div");
newDiv.id = "new_div";
newDiv.classList.add("example"); // 为新 div 添加样式类

// 2. 识别所有需要被包裹的元素
// 这里假设要包裹的是所有的 label 和紧随其后的 input
// 需要更精确的选择器来确保只选择目标元素
// 假设我们想要包裹的是从第一个 label 到最后一个 label 之间的所有元素
const allElementsToWrap = Array.from(document.body.children).filter(child => {
  // 这是一个简化示例，实际中需要根据具体 DOM 结构定义更精确的范围
  // 比如，如果这些元素都在某个已知父元素下，可以缩小查找范围
  return child.tagName === 'LABEL' || child.tagName === 'INPUT';
});

if (allElementsToWrap.length > 0) {
  // 3. 确定插入点并插入空 div
  // 将 newDiv 插入到最后一个目标元素之后
  const lastElementToWrap = allElementsToWrap[allElementsToWrap.length - 1];
  insertAfter(lastElementToWrap, newDiv);

  // 4. 遍历并移动目标元素到新 div 内部
  allElementsToWrap.forEach(element => {
    newDiv.append(element);
  });
}

// 原始的 showPassword 函数（如果需要保留）
const showPassword = (id, show) => {
  document.getElementById(id).type = show ? "text" : "password";
};

// 为 pw_3 重新绑定事件监听器，因为元素可能被移动
const pwCheckbox = document.getElementById("pw_3");
if (pwCheckbox) {
  // 移除旧的行内 onclick 属性（如果存在）
  pwCheckbox.removeAttribute('onclick');
  // 添加新的事件监听器
  pwCheckbox.addEventListener("click", function() {
    showPassword('plugin_delete_me_shortcode_password', this.checked);
  });
}

// 可选：为 .example 类添加 CSS 样式
/*
.example {
  border: 1px solid black;
  width: 200px;
  padding: 10px;
}
*/