I am trying to 'de-jquery' some code.

I have a div like so:

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

And I wish to insert a wrapper div around all elements except the first. The full number of elements is undetermined, there could be more.

The current solution uses jquery nextAll and wrapAll to produce the following result:

HTML

<div id="main">
    <div class="blue"></div>
    <div class="wrapper">
        <div class="green"></div>
        <div class="yellow"></div>
    </div>
</div>

jQuery

$(".blue").each(function() {
        $(this)
          .nextAll()
          .wrapAll('<div class="wrapper"></div>');
    });

How can I remove all jQuery from this and make it vanilla?

I cannot see any wrap type methods. I could grab the HTML that doesn't have index of [0] and insert it into a new div, then insert that after .blue but that seems messy. Is there a better way?

I am trying to 'de-jquery' some code.

I have a div like so:

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

And I wish to insert a wrapper div around all elements except the first. The full number of elements is undetermined, there could be more.

The current solution uses jquery nextAll and wrapAll to produce the following result:

HTML

<div id="main">
    <div class="blue"></div>
    <div class="wrapper">
        <div class="green"></div>
        <div class="yellow"></div>
    </div>
</div>

jQuery

$(".blue").each(function() {
        $(this)
          .nextAll()
          .wrapAll('<div class="wrapper"></div>');
    });

How can I remove all jQuery from this and make it vanilla?

I cannot see any wrap type methods. I could grab the HTML that doesn't have index of [0] and insert it into a new div, then insert that after .blue but that seems messy. Is there a better way?

• javascript
• dom
• dom-manipulation

• Could there be multiple blues in a container? Are you looking for nextAll or nextUntil? – gurvinder372 Commented Jan 16, 2018 at 9:51
• @gurvinder372 No there won't be multiple blue, and blue will always be first. But there could be other unknown eles after it. – Francesca Commented Jan 16, 2018 at 10:00
• So how exactly is this different now from your previous question, stackoverflow./q/48117422/1427878 …? – C3roe Commented Jan 16, 2018 at 10:04
• 1 @CBroe that previous question asks how to achieve this with jQuery. This question specifically asks how to recreate this WITHOUT jQuery. Did you read? – Francesca Commented Jan 16, 2018 at 10:05
• 1 Can someone please ment how this question is too broad. It's asking specifically how to wrap elements in a div with code examples. – Francesca Commented Jan 16, 2018 at 10:06

2 Answers 2

edit: oh you just want to skip the first item…

skip this solution to the new solution at the bottom.

// this is how you can grab a node.
// alternatively you could use document.querySelectorAll
// (wich will be similar to how $() works)
const blue = document.querySelector('.blue');

// if you desire to use querySelectorAll you can have something similar to
// .each() like: [...document.querySelectorAll('.blue')].map(element => {});

// this is not a necessity but keeps code a little more organized,
// instead of throwing this into line 22.
const nodes = [];
let element = blue;
while(element = element.nextElementSibling) {
  nodes.push(element);
}

// let's create a new div
const wrapper = document.createElement('div');
// and add the classname of your desire.
wrapper.classList.add('wrapper');
// now let's append all nodes:
wrapper.append(...nodes);

// and append the wrapper to the .main div:
blue.parentNode.appendChild(wrapper);

// and for the fun of it, let's display the oute:
document.body.appendChild(document.createElement('code')).textContent = blue.parentNode.outerHTML;

div {
  padding: 2px;
  border: 1px dotted #000;
  min-height: 20px;
  box-sizing: border-box;
  position: relative;
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

i just realized you just want to iterate after the first child…

let's try this then:

// let's grab the main element:
const main = document.querySelector('#main');
// you could also do this: document.querySelector('.blue').parentNode;

// now let's grab the children of that node and strip the first one:
const nodes = [...main.children].splice(1);

// now let's create the wrapper div
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

// and append all children:
wrapper.append(...nodes);

// and ofc add the wrapper to the container:
main.appendChild(wrapper);

div {
  padding: 2px;
  border: 1px dotted #000;
  min-height: 20px;
  box-sizing: border-box;
  position: relative;
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

Try below code.

var allBlues = document.querySelectorAll(".blue");
var divWrapper = document.createElement("div");
divWrapper.className = "wrapper";
for(var i = 0; i < allBlues.length; i++){
  // Iterate through all the siblings.
  var tempEle;
  while(tempEle = allBlues[i].nextElementSibling){
    divWrapper.appendChild(tempEle);
  }
}

main.appendChild(divWrapper);

.blue{
  
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>