CODEWITHSUNDEEP
javascriptjquerybackbone.js
newBike
newBike

Reputation: 15002

Append elements interleavely with purely javascript

I'm gonna append comments into <ul class="chat" id="comments_section"> with retrieved remote json data

return json data like this :

rtndata = [
  {
    username: Jordan,
    message: 123,
  },
  {
    username: Kobe,
    message: 456,
  },    
]

implement ideas :

rtndata.forEach(function (comment, index) {
    if index == EvenNumber:
      append_comment_div_with_Even_Number_format;
    else :
    append_comment_div_with_Odd_Number_format;
});

Finnaly the DOM structure should look like the following,

The attributes left and right should be used interleavely in the comment div template.

Could we use any template technique in purely js lib? (Does any one lib of backbone.js, react.js, underscore.js can do this job elegantly ?)

Thank you.

Expected result

<ul class="chat" id="comments_section">
            <li class="left.clearfix">
              <span class="pull-left chat-img">
                <img src="http://graph.facebook.com/Jordan/picture">
              </span>
              <span class="pull-left msg">
                123
              </span>
            </li>
            <li class="right.clearfix">
              <span class="pull-right chat-img">
                <img src="http://graph.facebook.com/Kobe/picture">
              </span>
              <span class="pull-right msg">
                456
              </span>
            </li>
</ul>

enter image description here

Upvotes: 0

Views: 49

Answers (2)

T J
T J

Reputation: 43156

By the looks of it, you're trying to adjust the style of alternate elements by adding css classes via js.

You can handle this without js, using css :nth-child selector:

li:nth-child(odd) {

}
li:nth-child(odd) span.msg{

}
li:nth-child(even) {

}
li:nth-child(even) span.msg{

}

If you must add classes (maybe you're using bootstrap), you should be able to do something like the following using underscore's template method:

<ul class="chat" id="comments_section">
  <% _.each(comments, function(comment, i) { %>
    <li class="<%= i%2==0? 'left' : 'right' %> clearfix">
      <span class="pull-<%= i%2==0? 'left' : 'right' %> chat-img">
                <img src="http://graph.facebook.com/Kobe/picture">
              </span>
      <span class="pull-<%= i%2==0? 'left' : 'right' %> msg">
                456
              </span>
    </li>
    <% }); %>
</ul>

Upvotes: 1

Will
Will

Reputation: 1768

Here's one approach:

var rtndata = [{
    username: 'Jordan',
    message: 123,
}, {
    username: 'Kobe',
    message: 456,
}, ];

var ul = document.getElementById('comments_section');
rtndata.forEach(function(comment, index) {
    var even = (index % 2 === 0);

    var li = document.createElement('li');
    li.className = (even ? 'left.clearfix' : 'right.clearfix');

    var span1 = document.createElement('span');
    span1.className = (even ? 'pull-left' : 'pull-right') + ' chat-img';

    var img = document.createElement('img');
    img.src = 'http://graph.facebook.com/' + comment.username + '/picture';

    var span2 = document.createElement('span');
    span2.className = (even ? 'pull-left' : 'pull-right') + ' msg';
    span2.innerHTML = comment.message;


    span1.appendChild(img);
    li.appendChild(span1);
    li.appendChild(span2);

    ul.appendChild(li);
});

Output:

enter image description here

Since you don't have that many elements, we can create a few elements and set them. If you have a lot, a second approach would be to create an html template and do a find replace.

Upvotes: 0

Related Questions