Wrap three elements in a for loop into a div

Question

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 1

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

Answer 2

divblock = document.createElement("blockquote");
divblock.setAttribute("class", "row");
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);

        //Add block to the div
        divblock.appendChild(block);

        if ( (i%3) == 2) {
            //Render the previous div
            document.getElementById('siteContent').appendChild(divblock);
            //Create a new div block
            divblock = document.createElement("div");
            divblock.setAttribute("class", "row");
        }
    } 
}

Answer 3

I'd just add a condition on i%3. So something like this:

var printWords = function(){
    div = document.createElement("div") //create a div to start

    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);

        div.appendChild(block);

        //run this each third loop or the last time through the loop
        if((i+1)%3 === 0 || i === words.length-1){  

          //Append your div to siteContent;
          document.getElementById('siteContent').appendChild(div);  

          //reset your div
          div = document.createElement("div"); 
        }
    }

}

Answer 4

Note:- I have edited this answer after understood the main problem by above replies.

var printWords = function(){
        var divTag = document.createElement('div');
          divTag.className = "row"; 
        for(i = 1; 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);
            divTag.appendChild(block);

            if((i % 3) == 0){
                document.getElementById('siteContent').appendChild(divTag); 
                divTag = document.createElement('div');
                divTag.className = "row";   
            }
        }
    }