What is the correct way to output data using js.each()?

Question

JavaScript

There is a view for output.

<div class="container">
                <div class="title-h3 black text-center title-article"></div>
                <p class="content-article" style="color: #000"></p>
            </div>

Written function for outputting data from the database using ajax

$.each(data, function(index, ajaxArticlesObj){

                    $('.title-article').append(ajaxArticlesObj.title);
                    $('.content-article').append(ajaxArticlesObj.text);

            });

As a result, we get this:

The question is how to implement the script correctly so that the data is displayed correctly, that is (title + text, title + text, etc.). I understand that this is a rather elementary question, but for some reason I can not find a solution.

Answer 1

<div class="articlemain">
                    <div class="title-h3 black text-center"></div>
                    <p class="content-article" style="color: #000"></p>
                </div>

$.each(data, function(index, ajaxArticlesObj){
                $('.articlemain').append('<div class="title-h3 black text-center">'+ajaxArticlesObj.title+'</div>');
                $('.articlemain').append('<p class="content-article" style="color: #000">'+ajaxArticlesObj.text+'</p>');
            });

The solution is clumsy, crutch, but it solved the problem as a temporary patch.