无法附加BR标记

Question

因此，我从用逗号分隔的文本区域中获取数据，转换为数组，并将它们全部附加到具有类chars的div中。我希望div每行只追加5个子元素。

我的JS代码：

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

我不知道CSS是否会在这里发挥作用。但是我的div(chars(的CSS是：

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

我试过了，但没有成功：

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

提前感谢！

Answer 1

您可以使用网格划分为5列：

var board = document.getElementsByClassName("chars")[0];
var input = 'test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test'; 
(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);     
}
})()

.chars {
padding: 20px 20px;
display: grid;
grid-template-columns: auto auto auto auto auto;
}

<div class="chars"></div>

Answer 2

您可以尝试仅使用css 在所有子元素上使用网格模板

display: grid;
grid-template-columns: repeat(5, 1fr);

如果你需要增加元素之间的间距，只需包括

grid-column-gap: 10px;

请注意，这与flex的效果不同，您需要进行不同的屏幕大小调整，因为这不是最好的响应设置。