html - How reorganize a group of div , pure JavaScript

Question

Hello I'm a beginner and I'm trying to manipulate the DOM by moving existing divs . How to make "for" loops on ". appendChild" in pure javaScript, no Jquery.

I know how to manipulate ".appendChild" just by the id, in this particular case it is a group of divs that I have to reorganize, I know that it is necessary to make a loop, but how to move a child div into a parent and vice versa by making loops, the is my question?

Can you help me please, thank you for your help.

<!-- ===============
my current HTML 
=============== -->

<div
  id="elemen1"
  class="gt_swatches--select"
  data-name="dog"
  data-value="diva"
>
</div>
<a onclick="Selec()" class="Enb1"></a>
 <span>diva</span>
 <div></div>

<div
  id="elemen2"
  class="gt_swatches--select"
  data-name="dog"
  data-value="divb"
>
</div>
<a onclick="Selec()" class="Enb1"></a>
 <span>divc</span>
 <div></div>

<div
  id="elemen3"
  class="gt_swatches--select"
  data-name="dog"
  data-value="divc"
>
</div>
<a onclick="Selec()" class="Enb1"></a>
 <span>divc</span>
 <div></div>

<!-- ==================
The desired result
================== -->

<a onclick="Selec()" class="Enb1">
 <div
  id="elemen1"
  class="gt_swatches--select"
  data-name="dog"
  data-value="diva"
>
<div id="NewId1" >
<span>diva</span>
</div>
</div>
</a>
 
<a onclick="Selec()" class="Enb1">
 <div
  id="elemen2"
  class="gt_swatches--select"
  data-name="dog"
  data-value="divb"
>
<div id="NewId2" >
<span>divb</span>
</div>
</div>
</a>
 
<a onclick="Selec()" class="Enb1">
 <div
  id="elemen3"
  class="gt_swatches--select"
  data-name="dog"
  data-value="divc"
>
<div id="NewId3" >
<span>divc</span>
</div>
</div>
</a>

question from:https://stackoverflow.com/questions/65842943/how-reorganize-a-group-of-div-pure-javascript

Answer 1

Waitting for answers