How to make dynamic Jquery ul Append?

Question

I want to make dynamic ul append to create receivers and senders messages.

Check my html and css code:

<ul>
              <li class="sent">
                <img src="http://emilcarlsson.se/assets/mikeross.png" 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>
              </li>
              <li class="replies">
                <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                <p>When you're backed against the wall, break the god damn thing down.</p>
              </li>
            </ul>

I got json from replies and senders. Need to make this logic :

 if(data.socketmessage.senderID === nickname.val()){
                    append to sender
                } else{
                    append to receiver
                }

Answer 1

您可以将html template tag和javascript函数用于所需的add the class。

＆＃13;

＆＃13;

function addChat(className, imgSource, chatText) {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);

  var list = document.getElementById("chatList");
  list.appendChild(clon);

  var newLine = list.lastElementChild;

  newLine.classList.add(className);

  newLine.firstElementChild.src = imgSource;
  newLine.lastElementChild.innerHTML = chatText;

  return newLine;
}

function addTestChat() {
  console.log(addChat("sent", "http://via.placeholder.com/100x100", "Sending a test..."));
}

＆＃13;

<ul id="chatList">
  <li class="sent">
    <img src="http://via.placeholder.com/100x100" 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>
  </li>
  <li class="replies">
    <img src="http://via.placeholder.com/100x100" alt="" />
    <p>When you're backed against the wall, break the god damn thing down.</p>
  </li>
</ul>

<button onclick="addTestChat()">
Test
</button>

<template>
  <li >
    <img src="http://via.placeholder.com/100x100" alt="" />
    <p>When you're backed against the wall, break the god damn thing down.</p>
  </li>
</template>

＆＃13;

＆＃13;

＆＃13;

请参阅JsFiddle