n個ずつ要素をdivで囲みたい（生JS）

Question

前提・実現したいこと

jQuery から生jsへの書き換えを行っており、wrapAll を使っていたコードを生jsで書きたいです。

発生している問題・エラーメッセージ

5つずつ<p>を<div>で囲みたく、for文を使って最初の５つを囲むことは出来ました。しかし、それ以降の<p>にループさせる方法が分かりません。
while文を使うと、重すぎてページが読み込まれませんでした。

for の外に appendChild を出せばいいのかと思って試してみましたが、エラーが出て上手くいきませんでした。

該当のソースコード

// これを

let elm = $('.titles');
  do {
    $(elm).children("p:lt(5)").wrapAll('<div class="section animation"></div>')
  } while ($(elm).children("p").length);

こんな感じに書き換えました。

var div = document.createElement('div');
  var title = document.querySelectorAll(".titles p");
  var titles = document.getElementsByClassName('titles')[0];
  div.setAttribute('class', 'section animation');
  for (var i = 0; i < 5; i++) {
    div.appendChild(title[i]);
  };
  titles.appendChild(div);

これだとループされないので、困っています。

試したこと

do {
  for (var i = 0; i < 5; i++) {
    div.appendChild(title[i]);
  };
  titles.appendChild(div);
} while (title.length);

これは重すぎて読み込まれませんでした。

for の外に appendChild を出せば軽くなるかと思い、とりあえずやってみました。

var add_data = new Array();
for(var i = 0; i < 5; i++){
  add_data.push(title[i]);
}
div.appendChild(add_data.join(''));

エラーになってしまいました。

Uncaught TypeError: Node.appendChild: Argument 1 is not an object.

お手上げ状態です。どうすればいいかアドバイスをお待ちしております。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版、Safari 604.1

Answer 1

下記でどうでしょう。

var title = document.querySelectorAll(".titles p");
var titles = document.getElementsByClassName('titles')[0];
for (var i = 0; i < title.length; i++) {
  if(i%5===0){
    var div = document.createElement('div');
    div.setAttribute('class', 'section animation');
  };
  div.appendChild(title[i]);
  if(i%5===4){titles.appendChild(div)}
};
titles.appendChild(div);

Comments

[erp]

ありがとうございます。お陰さまで思ったように実装できました！大変助かりました。