How to include tags html inside div with Javascript

Question

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

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

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

mplungjan · Accepted Answer · 2022-08-04 18:39:15Z

1

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" class="some_class" id="element_1">
<input type="checkbox" class="some_class" id="element_2">
<input type="checkbox" class="some_class" 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 class="fa"><input type="checkbox" class="togglePw" id="pw_3">
</label>

edited Aug 4, 2022 at 18:39

answered Aug 4, 2022 at 17:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Snorlax Over a year ago

I thank you infinitely for the answer, I appreciate it. I see that running the code snippet works. But I have a problem, in the question to simplify I gave all inputs the same class, but in reality my inputs have different classes, some have no classes and besides there are other tags as well. So I was wrong not to specify this. Instead of const inputs = document.querySelectorAll (".some_class"); can I use something else to tell the code that it must include something other than some_class? I updated the question, sorry.

Snorlax Over a year ago

I solved it by entering const inputs = document.querySelectorAll("#plugin_delete_me_shortcode_password"); now all my tags are inside the div as i wanted. Thanks again.

mplungjan Over a year ago

That is weird, since that is an ID and IDs need to be unique. So how can they all have the same ID but different classes or no clases?

mplungjan Over a year ago

See updated code for an example with your html after cleaning it

Collectives™ on Stack Overflow

How to include tags html inside div with Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related