Create a new div and move the existing div

Question

I have to create a new div and move the existing div into the newly created div.

This is my current div structure

<div class="input-wrapper">some text1</div>
<div class="input-wrapper">some text2</div>
<div class="input-wrapper">some text3</div>
<div class="input-wrapper">some text4</div>

I want to create a new div <div class="form-group"></div> and move the input-wrapper div inside. So the new structure should look like this

<div class="form-group"><div class="input-wrapper">some text1</div></div>
<div class="form-group"><div class="input-wrapper">some text2</div></div>
<div class="form-group"><div class="input-wrapper">some text3</div></div>
<div class="form-group"><div class="input-wrapper">some text4</div></div>

I have used the following script

function create_structure(){
   $(".input-wrapper").append('<div class="form-group"></div>'); 
   $(".form-group").appendTo(".input-wrapper");      
};
window.setTimeout( create_structure, 2000 ); // 2 seconds

I am not getting the desired structure.

Anything I am missing in the code?

Any suggestions would be appreciated. Thanks in advance

score 2 · Answer 1 · answered Jun 08 '22 at 01:29

2

how about using wrap method in jquery?

for (let i = 0; i < $(".input-wrapper").length; i++) {
    $($(".input-wrapper")[i]).wrap("<div class='form-group'></div>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-wrapper">some text1</div>
<div class="input-wrapper">some text2</div>
<div class="input-wrapper">some text3</div>
<div class="input-wrapper">some text4</div>

answered Jun 08 '22 at 01:29

dangerousmanleesanghyeon

571
3
11

if I also want to move existing span next to input-wrapper div. What do I need to do? – Owais Ahmed Jun 08 '22 at 01:55
@OwaisAhmed you mean `
some text1
` to `

some text1
` ? – dangerousmanleesanghyeon Jun 08 '22 at 02:04
like this

some text1
– Owais Ahmed Jun 08 '22 at 04:24
@OwaisAhmed https://stackoverflow.com/questions/3475594/jquery-use-wrap-to-wrap-multiple-elements this can be help for u – dangerousmanleesanghyeon Jun 08 '22 at 04:42

Ben GG · Answer 2 · 2022-06-08T11:08:29.810

Use the build-in .each in JQuery :

$(".input-wrapper").each(function(i) {
   $(this).wrap("<div class='form-group'></div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-wrapper">some text1</div>
<div class="input-wrapper">some text2</div>
<div class="input-wrapper">some text3</div>
<div class="input-wrapper">some text4</div>

for your second Question about adding <span> you can achieve this by modifying my code to

$(".input-wrapper").each(function(i) {
   $(this).append("<span class='field-validation-valid'></span>");
   $(this).wrap("<div class='form-group'></div>");
});

Create a new div and move the existing div

2 Answers2