HTMLでboxの数を入力に応じて変えたい

Question

上で入力された数だけboxを作成したいのですが、良い方法はありますか？

<input type='number'>
<div class='box'></div>

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  num.addEventListener('input',()=>{
    const v=parseInt(num.value);
    while(view.querySelectorAll('.box').length<v){
      view.appendChild(temp.content.cloneNode(true));
    }
    while((boxes=[...view.querySelectorAll('.box')]).length>v){
      boxes.splice(-1)[0].remove();
    }
  });
});
</script>
<template id="temp">
<div class='box'>box</div>
</template>

<input type='number' id="num" value="1" min="1" max="10">
<div id="view">
<div class='box'>box</div>
</div>