<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ol>

li {
 　　height: 100px;
  margin: 20px;
  line-height: 100px;
  background-color: orange;
  color: white;
  text-align: center;
}

ol + div {
    height: 200px;
    line-height: 200px;
    background-color: red;
    color: white;
    text-align: center;
}

const list = document.querySelector('ol');
const observedElement = document.createElement('div');
list.insertAdjacentElement('afterend', observedElement);
observedElement.textContent = 'この要素の 100% がビューポートに入ったら li 要素を5つ追加';

const callback = (entries) => {
  const numberOfListItems = list.getElementsByTagName('li').length;
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      for (let i = 1; i <= 5; i++) {
        const listItem = document.createElement('li');
        listItem.textContent = `list item ${numberOfListItems + i}`;
        list.appendChild(listItem);
      }
    }
  });
};

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0,
};

const observer = new IntersectionObserver(callback, options);
observer.observe(observedElement);