如何在帶有 Javascript 的 div 中包含標簽 html

Question

我有一個由幾個標簽組成的 html 源代碼。 不幸的是，這些沒有父容器，所以我想通過 Javascript 添加它，因為我不能直接對 html 結構進行操作。

現在，有了這個 function 我在其他元素之后添加標簽 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="exampmple" id="new_div"></div>

相反，我想要實現的是
現在我對 Javascript 比較陌生，並且希望作為粉絲學習新事物。 是否可以用 Js 或 jQuery 做我所描述的事情？ 感謝您的幫助，感謝您的任何回復。

<div class="exampmple" 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>

更新：
這是我的實際 html 代碼，我寫的前一個是為了簡化問題。

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

Answer 1

這會更好

 function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } const newDiv = document.createElement("div"); newDiv.id = "new_div"; newDiv.classList.add("example"); const inputs = document.querySelectorAll(".some_class"); const lastInput = inputs[inputs.length - 1] insertAfter(lastInput, newDiv); inputs.forEach(inp => newDiv.append(inp))

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

使用現有代碼的示例 - 如果您可以更改代碼，請執行此操作

 const showPassword = (id, show) => { document.getElementById(id).type = show? "text": "password" }; document.getElementById("pw_3").addEventListener("click", function() { showPassword('plugin_delete_me_shortcode_password', this.checked) }) function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } const newDiv = document.createElement("div"); newDiv.id = "new_div"; newDiv.classList.add("example"); const inputs = document.querySelectorAll("label"); const lastInput = inputs[inputs.length - 1] insertAfter(lastInput, newDiv); inputs.forEach(inp => newDiv.append(inp))

 .example { border: 1px solid black; width: 200px; padding: 10px; }

 <label>Password <input type="password" autocomplete="off" autofocus="autofocus" id="plugin_delete_me_shortcode_password" name="plugin_delete_me_shortcode_password"></label> <label class="fa"><input type="checkbox" class="togglePw" id="pw_3"> </label>