Cannot append BR tag

  arrays, css, flexbox, html, javascript

So, I am taking data from a textarea separated by comma, converting to an array and appending them all to a div with class chars. I want it such that the div will only have 5 children appended per row.

My JS code:

var board = document.getElementsByClassName("chars")[0];
var input = document.getElementById("charInput").value; 

function appendthem(){
    
    input = input.replace(/ /g,'')
    var array= input.split(",");

    for(var i=0; i<array.length; i++){
        var elem = document.createElement("p");
        var textnode  = document.createTextNode(array[i]);
        elem.appendChild(textnode);
        board.appendChild(elem);     
    }
}

I don’t know if the CSS will have a role to play here. But the CSS of my div (chars) is:

.chars{
    padding: 20px 20px;
    display: flex;
    justify-content: space-evenly;
}

I tried but did not work:

var br = document.createElement("br");
        if( (i+1)%5 ==0 ){
            board.appendChild(br);   
        }
        else{
            board.appendChild(elem);    
        }

Thanks in advance!

Source: Ask Javascript Questions

LEAVE A COMMENT