Moving multiple elements into new div

Question

I want to move label, input and span elements inside the new div.

The structure is like this

First name

I want the label,input and span elements inside a new div like this


   First name

I am able to move label inside the div using the following code

var el = $('.form-control');
$(el).add($(el).prev('label')).wrapAll('');

How can I also move the span element next to the input element (class = form-control) inside the form-group class div

I dont want to move all the elements. The HTML structure has few other hidden input and label elements. I just want to move the label above input[class=form-control] and the span below input[class=form-control] into a new div

user_2610061 · Answer

This should do it:

var el = $('.form-control');
el.add(el.prev('label')).add(el.next('span')).wrap('');

.form-group {background-color:pink}


First name

span

There is no need for wrapping your el with $(), as it is already a jQuery object. Also, you can use the simpler .wrap() instead of .wrapAll() which is intended to be used for a nested wrapping of more than one layers. In your case you only wrap with one layer (

).

user_3552105 · Answer

You can move all of the elements into the div with this code:

var newElem = document.createElement('div')

Array.prototype.forEach.call(document.querySelectorAll('label, input, span'), function(c){
  newElem.appendChild(c);
});
document.body.appendChild(newElem);

Create a new div
Obtain a nodeList with document.querySelectorAll
Use Array#forEach.call on the nodeList to iterate through it and append each element to the newly created div

This is adapted from the answer to this question.

user_11690507 · Answer

Well, you can follow my JS code:

The HTML Code (index.html):






  First name

Here is the 'myScript.js' file:

const labelNode = document.getElementById('lbl');
const inputNode = document.getElementById('fxb_8f3aee');
const spanNode = document.getElementById('spn');
const divNode = document.getElementsByClassName('form-group')[0];

divNode.appendChild(labelNode);
divNode.appendChild(inputNode);
divNode.appendChild(spanNode);

Keep in mind that, don't try to insert all the nodes at once. Insert each node step by step. I think it is easy to understand my code.

user_6935561 · Answer

var el = $('.form-control');
let nextSpan = $("#fxb_8f3aee").next('span');
$(el).add($(el).prev('label')).wrapAll('');
$(el).add(nextSpan).wrapAll('');


First name

Moving multiple elements into new div

4 Answers