在for循环中设置HTML样式位置？

<div>
  <% for (var i = 0; i < 5; i++) { %>
    <p style="position: absolute; top: <%= i * 20 %>px; left: <%= i * 30 %>px;">第 <%= i+1 %> 段文字</p>
  <% } %>
</div>

<div id="container"></div>

<script>
  var container = document.getElementById('container');
  for (var i = 0; i < 5; i++) {
    var paragraph = document.createElement('p');
    paragraph.textContent = '第 ' + (i+1) + ' 段文字';
    paragraph.style.position = 'absolute';
    paragraph.style.top = (i * 20) + 'px';
    paragraph.style.left = (i * 30) + 'px';
    container.appendChild(paragraph);
  }
</script>