teratail questions-16480 への回答

HTML

<ul class="paging" data-pagesize="1">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>

<ul class="paging" data-pagesize="2">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class="paging" data-pagesize="3">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
</ul>

<ul>
 <li><a href="https://teratail.com/questions/16480">リストを分割してページ送りで表示を切り替える(16480)｜teratail</a></li>
</ul>

CSS

[aria-hidden=true] {
  display: none;
}

JavaScript

'use strict';
(function () {

  function setAriaHiddenChildren (parentNode) {
    for (var i = 0, elements = parentNode.querySelectorAll('[aria-hidden=false]'), l = elements.length; i < l; ++i) {
      elements[i].setAttribute('aria-hidden', 'true');
    }
  }

  var containClassToken = (function () {
    if (document.createElement('p').classList) {
      return function containClassToken (element, classToken) {
        return element.classList.contains(classToken);
      };
    }

    return function containClassToken (element, classToken) {
      return (' ' + element.className + ' ').indexOf(classToken) !== -1;
    };

  }());

  function handleDOMContentLoaded (event) {
    var doc = event.target,
        elements = doc.querySelectorAll('.paging'),
        headerTemplate = doc.createElement('div'),
        spanTemplate = doc.createElement('span'),
        span;

    spanTemplate.className = 'paging-prev';
    spanTemplate.appendChild(doc.createTextNode('prev'));
    headerTemplate.appendChild(spanTemplate.cloneNode(true));
    headerTemplate.appendChild(doc.createTextNode(' '));

    span = spanTemplate.cloneNode(true);
    span.className = 'paging-next';
    span.firstChild.data = 'next';
    headerTemplate.appendChild(span);
    headerTemplate.appendChild(doc.createTextNode(' '));

    span = doc.createElement('span');
    span.className = 'paging-counter';
    spanTemplate.className = 'paging-current';
    spanTemplate.firstChild.data = '1';
    span.appendChild(spanTemplate.cloneNode(true));
    span.appendChild(doc.createTextNode('/'));
    spanTemplate.className = 'paging-last';
    spanTemplate.firstChild.data = '1';
    span.appendChild(spanTemplate.cloneNode(true));
    headerTemplate.appendChild(span);

    for (var i = 0, l = elements.length, element, header, children, pageSize, j, m; i < l; ++i) {
      element = elements[i];
      pageSize = Number(element.getAttribute('data-pagesize'));
      children = element.children;

      if (pageSize <...