不能 append BR 標簽

Question

因此，我從用逗號分隔的文本區域中獲取數據，轉換為數組並將它們全部附加到帶有 class 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（字符）的 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 的效果不同，您需要進行不同的屏幕尺寸調整，因為這不是最佳響應設置。