使用 JavaScript 动态封装 HTML 元素：创建父容器的教程

<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>

/**
 * 在参考节点之后插入新节点
 * @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. 选取所有需要被封装的元素
// 这里我们选择所有 class 为 'some_class' 的 input 元素
const targetElements = document.querySelectorAll(".some_class");

// 3. 将新创建的 div 插入到 DOM 中
// 我们选择将新 div 插入到最后一个目标元素之后。
// 这样做的目的是为后续将目标元素移动到新 div 中做准备。
if (targetElements.length > 0) {
  const lastTargetElement = targetElements[targetElements.length - 1];
  insertAfter(lastTargetElement, newDiv);

  // 4. 将所有目标元素移动到新的 div 容器中
  // 当元素被 append 到新父节点时，它会自动从原父节点中移除
  targetElements.forEach(element => newDiv.append(element));
} else {
  console.warn("没有找到需要封装的元素。");
}

<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>

// ... (insertAfter 函数保持不变)

const newDiv = document.createElement("div");
newDiv.id = "new_div_complex";
newDiv.classList.add("example"); // 可以添加样式，例如边框，使其更明显

// 选取所有 label 和 input 元素
const complexElements = document.querySelectorAll("label, input");

if (complexElements.length > 0) {
  const lastComplexElement = complexElements[complexElements.length - 1];
  insertAfter(lastComplexElement, newDiv); // 将新 div 插入到最后一个选定元素之后

  complexElements.forEach(element => newDiv.append(element)); // 将所有选定元素移动到新 div 中
} else {
  console.warn("没有找到需要封装的复杂元素组。");
}

.example {
  border: 1px solid black;
  width: 200px;
  padding: 10px;
  margin: 10px 0; /* 增加一些外边距，使其与周围内容分离 */
}

// 假设你已经引入了 jQuery
$(".some_class").wrapAll("<div id='new_div_jquery' class='example'></div>");