Wrap three elements in a for loop into a div

I wrote this method:

var printWords = function(){
    for(i = 0; i < words.length; i++){
        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];
         
        block.appendChild(p);
        block.appendChild(small);
         
        document.getElementById('siteContent').appendChild(block);
    } 
}

Which creates for every element in words something like this:

<blockquote>
    <p>to great somebody</p>
    <small>jemanden grüßen</small>
</blockquote>

My question is now how I can improve or better said change my for loop so that always three of these elements get wrapped into such a div?

<div class="row">
   //three of the above blockquotes
</div>

Answer

Perhaps try something like this:

var printWords = function(){
    var row, block, p, small;
    for(i = 0; i < words.length; i++){
        if ((i % 3) == 0) {
            row = document.createElement("div");
            row.setAttribute("class", "row");
            document.getElementById('siteContent').appendChild(row);
        }

        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];

        block.appendChild(p);
        block.appendChild(small);

        row.appendChild(block);
    } 
}

Demonstration