Как стилизовать каждый элемент в массиве с css?

Question

Кто-нибудь сможет привести пример, как это сделать? Я хочу оформить его внутри поля с именем пользователя в левом углу, выделенным жирным шрифтом, датой / временем в нижнем углу и комментарием в середине.

$(document).ready(function() {

     var comments = document.getElementById("allcomments").value; 

     //Get Storage 
                var username = window.localStorage.getItem("username");

        // Call Ajax for existing comments
        $.ajax({
        type: 'GET',
        url: 'URL.php',
        success: function(result) {
            var arr = JSON.parse(result);

            for(var i = 0; i < arr.length; i++) {
                var obj = arr[i];

                console.log(obj);   

                var output = document.getElementById("allcomments"); 
                output.innerHTML += (obj.username + ' ' + obj.comment + ' ' + obj.commDate + ' ' + obj.sentiment + '<br>'); 

            }

        }
    });

    return false;
}); 

HTML

          <div id="content" class="content">
            <h1>Forum</h1>
                <form id="forumPost" method='POST'>
                   <textarea rows="3" col="60" name="comment" placeholder="Create a Post..." id="comment"></textarea>
                   <button><input type='submit' name='submit' value='Post' class="post"></button>
                </form>
                <p id="error" class="errormessage"></p>
                <p id="allcomments" class="postmessage"></p>
            </div>

Answer 1

Вы можете разделить каждое значение в объекте на блоки.

Ваша строка output.innerHTML += (obj.username + ' ' + obj.comment + ' ' + obj.commDate + ' ' + obj.sentiment + '<br>'); объединяет все значения, чтобы стать строкой. Это нежелательно, когда вы собираетесь стилизовать его так, как вы упомянули.

Если вы собираетесь отображать результаты строка за строкой, #allcomments лучше быть <div>. Затем вы должны решить, как строки результатов отображаются в дом. В вашем случае, скажем, код каждой строки будет выглядеть так:

<div class="comment-container">
    <div class="username"><!--obj.username--></div>
    <div class="comment"><!--obj.comment--></div>
    <div class="date"><!--obj.commDate--></div>
</div>

После этого стилизуйте его. Что-то вроде:

#allcomments>.comment-container>div{
    display: block;
    width: 100%;
}
#allcomments>.comment-container .username{
    text-align: left;
    font-weight: bold;
}
#allcomments>.comment-container .date{
    text-align: right;
}

Наконец, измените строку output.innerHTML. Вы должны установить значение, используя макет, описанный выше.

output.innerHTML += '<div class="comment-container"><div class="username">'+obj.username+'</div><div class="comment">'+obj.comment+'</div><div class="date">'+obj.commDate+'</div></div>';

Надеюсь, эта помощь.