Best way to add a lot of HTML to the page via JS?

Question

Guys, I’m creating a small social network (one page) and I wanted to know how to add a lot of html to the page. I’ll explain better: I have a div call Timeline that serves as container and inside it in thesis is to be added another div, news and publications feeds; only that div is too large and a bit complex to concatenate into a js variable and eventually use some function to add it. Is there a better way to do that?

HTML

<div class="wrap_ui" id="timeline">
            <div class="timeline_feed">
            <div class="feed_row">
                <div class="feed_info">
                    <img src="public/img/no_photo.png">
                </div>
                <div class="feed_info" style="font-weight: bold; color: #666;">
                    No name
                </div>
                <div class="feed_info">
                    "No status"
                </div>
            </div>
            <div class="feed_row">
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure...
                </article>
            </div>
            <div class="feed_row" style="border-top: 1px solid #eee;">
                <div class="feed_opt">
                    <img src="public/img/icones/love-icon-hover.png">
                </div>
                <div class="feed_opt">
                    3k
                </div>
                <div class="feed_opt">
                    <img src="public/img/icones/share-icon.png">
                </div>
                <div class="feed_opt">
                    4k
                </div>
                <div class="feed_opt">
                    <img src="public/img/icones/comment-icon.png">
                </div>
                <div class="feed_opt">
                    34k
                </div>
            </div>
        </div>
        </div>

CSS

.timeline_feed{
    width: inherit;
    height: auto;
    margin-bottom: 10px;

    /*...*/
    background-color: white;
    border-radius: 2px;
    /*border-bottom: 1px solid #eee;*/
}

.feed_row{
    position: relative;
    padding: 5px;

    /*...*/
    background-color: inherit;
}

.feed_row > .feed_info{
    display: inline-block;


    /*...*/

}

.feed_row > .feed_info:first-child{ margin-right: 10px; }
.feed_row > .feed_info:last-child{ margin-left: 50px;   }


.feed_row > .feed_info > img{
    width: 4.3em;
    height: 4.3em;
    vertical-align: middle;

    /*...*/
    border-radius: 50%;

}

.feed_row > .feed_info > .feed_name_user{
    font-weight: 700;

    /*...*/
    color: #444;
}

.feed_row > .feed_info > .feed_status_user{
    color: #666;
}

.feed_row > article{
    padding: 20px 5px;
    word-spacing: 5px;
    margin-bottom: 10px;

    /*...*/
    color: #555;
    font-size: 17px;
}

.feed_row > .feed_opt{
    display: inline-block;
    padding: 5px;
    margin-right: 7px;

    /*...*/
    color: #666;

}

.feed_row > .feed_opt > img{
    width: 25px;
    height: 25px;
    margin-right: 8px;
    vertical-align: middle;
}

Answer 1

Dude, I think in your case it’s best to use a framework like Angular.JS https://angularjs.org/ has enough stuff on the net about it.

abrs