0

I want to turn the elements with class "a" into a div with javascript, without losing the order in which they are found with their siblings. Here is the code, I have not made much progress, I appreciate your help in advance.

const elementParent= document.querySelectorAll(".a");
console.log(elementParent)

const parent= elementParent[0].parentNode;
console.log(parent)

parent.innerHTML= elementParent[0]
<div style="display:flex">
  <div class="cx">0</div>
  <div class="cx">0</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="b">b</div>
</div>
The final result of the html should be: 
   <div style="display:flex">
      <div class="cx">0</div>
      <div class="cx">0</div>
      <div>
        <div class="a">A</div>
        <div class="a">A</div>
      </div>
      <div class="b">b</div>
    </div>
Usiel
  • 671
  • 3
  • 14
  • Acquire an array of the elements to wrap, insert a new div before them, remove the two elements from where they are, add the two elements to the new div you inserted. There's more than enough info on the internet to help you figure this out. :) – Chris Apr 02 '22 at 20:40
  • 1
    This has probably been asked before, but I'm too lazy to search for the dupe. Here's how to do this: https://jsfiddle.net/yzg9L084/ –  Apr 02 '22 at 20:41

1 Answers1

1

It is not an exact solution, but I think it helps

  1. create a div: document.createElement()
  2. fill its innerHTML from original element
  3. use insertbefore to insert new before the original
  4. use .remove() to remove the original.
gabor.zed
  • 134
  • 1
  • 2
  • 6