Dynamic Data

[Chandan746]

How i can put this on dynamic data that are created by function

`

   {% load emoticons_tags %}
  <div class="messages">
      {% emoticons %}
    <ul id="chat-log"  >
      
        Documenting is boring but usefull :p
      
      <li class="replies">
        <img src='{{rec_img}}' alt="" />
        <p>When you're backed against the wall, break the god damn thing down.</p>
      </li> <li class="sent">
        <img src='{{rec_img}}' alt="" />
        <p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?! :p </p>
      </li>
       
    </ul >
    {% endemoticons %}`

`

function createMessage(data) {
  var author = data['author'];
  
  var msgListTag = document.createElement('li');
  var imgTag = document.createElement('img');
  var pTag = document.createElement('p');
  pTag.textContent =  data.content;
  imgTag.src = usrurl;

  
  if (author === username) {
    msgListTag.className = 'sent';
    imgTag.src = usrurl;
  } else {
    msgListTag.className = 'replies';
    imgTag.src =recurl;
  }

  msgListTag.appendChild(imgTag);
  msgListTag.appendChild(pTag);
  document.querySelector('#chat-log').appendChild(msgListTag);
  }`