How to include tags html inside div with Javascript-CodePudding

I have an html source code composed of several tags. Unfortunately these do not have a parent container, so I would like to add it via Javascript because I cannot act directly on the html structure.

Now, with this function I am adding tags div after other elements (input in my case).

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

I get this, but that's not what I'm trying to do.

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

Instead, what I would like to achieve is this
Now I am relatively new to Javascript and am looking to learn new things as a fan. Is it possible to do what I have described with Js or jQuery? I appreciate any help, thanks for any replies.

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

Update:
This is my actual html code, the previous one I wrote to simplify the question.

<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"  id="pw_3" onclick="showPassword('plugin_delete_me_shortcode_password')">
<label for="pw_3" ></label>

CodePudding user response：

This will work better

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"  id="element_1">
<input type="checkbox"  id="element_2">
<input type="checkbox"  id="element_3">

Example with your existing code - if you can change the code do this

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 ><input type="checkbox"  id="pw_3">
</label>