Moving multiple elements into new div-CodePudding

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

The structure is like this

<label for="" >First name</label>
<input id="fxb_8f3aee"  type="text" value="" maxlength="255" placeholder="">
<span  data-valmsg-replace="true"></span>

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

<div >
   <label for="" >First name</label>
   <input id="fxb_8f3aee"  type="text" value="" maxlength="255" placeholder="">
   <span  data-valmsg-replace="true"></span>
</div>

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

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

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

CodePudding user response：

This should do it:

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

.form-group {background-color:pink}

<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
<label for="" >First name</label>
<input id="fxb_8f3aee"  type="text" value="" maxlength="255" placeholder="">
<span  data-valmsg-replace="true">span</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 (<div >).

CodePudding user response：

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.

CodePudding user response：

Well, you can follow my JS code:

The HTML Code (index.html):

<!DOCTYPE html>
<html>

<body>

  <label id="lbl" for="" >First name</label>
  <input id="fxb_8f3aee"  type="text" value="" maxlength="255" placeholder="">
  <span id="spn"  data-valmsg-replace="true"></span>

  <div ></div>


  <!-- Add Your Custom Script Here -->
  <script type="text/javascript" src="/myScript.js"></script>
</body>

</html>

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.

CodePudding user response：

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<label for="" >First name</label>
<input id="fxb_8f3aee"  type="text" value="" maxlength="255" placeholder="">
<span  data-valmsg-replace="true"></span>