JavaScript动态包裹HTML元素：为无父容器节点创建新容器的教程

const newDiv = document.createElement("div");
newDiv.id = "new_div"; // 设置ID
newDiv.classList.add("example"); // 添加CSS类

const targetElements = document.querySelectorAll(".some_class");

targetElements.forEach(element => {
  newDiv.append(element); // 将元素移动到 newDiv 中
});

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

// 假设我们希望将 newDiv 插入到原先最后一个目标元素的后面
const lastTargetElement = targetElements[targetElements.length - 1];
insertAfter(lastTargetElement, 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">
  <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);
}

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

// 2. 选择要包裹的目标元素
const inputs = document.querySelectorAll(".some_class");

// 3. 将新容器插入到DOM中（在最后一个目标元素之后）
// 确保 inputs 列表不为空
if (inputs.length > 0) {
  const lastInput = inputs[inputs.length - 1];
  insertAfter(lastInput, newDiv);
}

// 4. 将目标元素移动到新容器中
inputs.forEach(inp => newDiv.append(inp));

// 可以添加一些CSS来观察效果
/*
.example {
  border: 1px solid black;
  width: 200px;
  padding: 10px;
}
*/

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

<div class="example" id="new_div">
  <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">
  <label for="pw_3" class="fa"></label>
</div>

// 辅助函数：在指定节点后插入新节点
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

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

// 2. 选择要包裹的目标元素 (这里选择所有的 label 元素作为示例)
// 根据实际情况，可能需要更复杂的选择器，例如：
// const targetElements = document.querySelectorAll("label, input[type='password'], input[type='checkbox'].togglePw");
// 或者选择一个共同的父元素下的所有子元素
const labels = document.querySelectorAll("label"); // 假设要包裹的元素是这些 label

// 3. 将新容器插入到DOM中
// 假设 newDiv 应该插入到最后一个 label 元素之后
if (labels.length > 0) {
  const lastLabel = labels[labels.length - 1];
  insertAfter(lastLabel, newDiv);
}

// 4. 将目标元素移动到新容器中
labels.forEach(lbl => newDiv.append(lbl));

// 处理原始的 showPassword 逻辑，使用 addEventListener
const showPassword = (id, show) => {
  document.getElementById(id).type = show ? "text" : "password";
};

// 假设 id 为 'pw_3' 的 input 元素是用来切换密码可见性的
const pwToggle = document.getElementById("pw_3");
if (pwToggle) {
  pwToggle.addEventListener("click", function() {
    showPassword('plugin_delete_me_shortcode_password', this.checked);
  });
}

// 原始HTML可能需要调整以适应新的事件处理方式
// <label for="pw_3" class="fa"><input type="checkbox" class="togglePw" id="pw_3"></label>